dzhenkins 49 Posted October 4, 2014 Report Share Posted October 4, 2014 Всем привет. Весь интернет перекопал, не могу сделать так, что бы картинка ресайзилась. Width:100% не покатит, так как есть определенные условия. Картинке задается статичный размер в теге img (например ширина 300, высота 300). Как только экран например будет 150, то соответственно и картинка пропорционально должна уменьшиться. Пробовал max-width: 100% - в хроме работает, в остальных браузерах не хочет... Может быть кто то сталкивался уже с таким вопросом? Помогите пожалуйста. Link to post Share on other sites
VIP styoplotr 514 Posted October 4, 2014 VIP Report Share Posted October 4, 2014 Если задать родительскому блоку размеры по 30% например, а самой картинке по 100%, то она должна уменьшаться при уменьшении окна браузера. <div style = "width:30%; height:30%"> <img src = "http://talk.pr-cy.ru/uploads/profile/photo-thumb-8157.jpg?_r=1401732686" width = "100%" height = "100%"> </div> Или я вас не правильно понял? Link to post Share on other sites
Macdec 139 Posted October 4, 2014 Report Share Posted October 4, 2014 Должно работать img { height: auto; max-width: 100%; } почистите кэш и проверьте еще раз. Link to post Share on other sites
dzhenkins 49 Posted October 4, 2014 Author Report Share Posted October 4, 2014 Link to post Share on other sites
Olezhko 9 Posted October 4, 2014 Report Share Posted October 4, 2014 img { display:block; width:100%; height: auto; } Link to post Share on other sites
dzhenkins 49 Posted October 4, 2014 Author Report Share Posted October 4, 2014 Должно работать img { height: auto; max-width: 100%; } почистите кэш и проверьте еще раз. хм... я конечно сейчас ещё раз попробую... но, повторюсь, заработало только в хроме... почищу кеш, открою в анонимном окне... Link to post Share on other sites
Olezhko 9 Posted October 4, 2014 Report Share Posted October 4, 2014 нужно изображение как блок определить! Link to post Share on other sites
zenn 266 Posted October 4, 2014 Report Share Posted October 4, 2014 Почему бы не использовать замечательные возможности CSS3 ? Допустим что ваша картинка слинкована с классом "image-responsive" (<img class="image-responsive" scr="" />) /** Самый малый размер **/ .image-responsive { width: 100px; } /** Если мин. по длине для девайса >= 768px - ставим 300px для картинки, ну и в том же духе далее. **/ @media (min-width: 768px) { .image-responsive { width: 300px !important; } } Ten and dzhenkins 2 Link to post Share on other sites
dzhenkins 49 Posted October 4, 2014 Author Report Share Posted October 4, 2014 нужно изображение как блок определить! нет... это никак не повлияет Link to post Share on other sites
dzhenkins 49 Posted October 4, 2014 Author Report Share Posted October 4, 2014 Почему бы не использовать замечательные возможности CSS3 ? Допустим что ваша картинка слинкована с классом "image-responsive" (<img class="image-responsive" scr="" />) /** Самый малый размер **/ .image-responsive { width: 100px; } /** Если мин. по длине для девайса >= 768px - ставим 300px для картинки, ну и в том же духе далее. **/ @media (min-width: 768px) { .image-responsive { width: 300px !important; } } а это вариант! спасибо! конечно придётся несколько правил писать..... Link to post Share on other sites
Olezhko 9 Posted October 4, 2014 Report Share Posted October 4, 2014 нет... это никак не повлияет да ладно, давай сайт в ЛС, посмотрим. Link to post Share on other sites
dzhenkins 49 Posted October 4, 2014 Author Report Share Posted October 4, 2014 да ладно, давай сайт в ЛС, посмотрим. не дам, такой html пример очень просто верстануть Link to post Share on other sites
zenn 266 Posted October 4, 2014 Report Share Posted October 4, 2014 да ладно, давай сайт в ЛС, посмотрим. Не сработает если родительские блоки в dom-дереве жестко не определены как резина (не указаны атрибуты height: %) - если по дереву хоть у 1 элемента не будет указателя процентной высоты/ширины - то без смысла внутри блока задавать auto атрибут и height/width 100%. а это вариант! спасибо! конечно придётся несколько правил писать..... Это лучше, чем перепиливать вашу верстку полностью в респонсивное представление, если верстка выполнена в статичном ключе. П.с. - для спасибок вроде бы кнопку придумали, уже давно. П.п.с. - как элемент пропаганды качественной верстки - взгляните на сетку bootstrap и zubr.foundation. Link to post Share on other sites
Ten 79 Posted October 4, 2014 Report Share Posted October 4, 2014 А если использовать яваскрипт? Типа вот так http://stackoverflow.com/questions/1143517/jquery-resizing-image Link to post Share on other sites
silicoid 52 Posted October 6, 2014 Report Share Posted October 6, 2014 Народ правильно написал img { display:block; min-width:10px; max-width:1000px; width:100%; } эта конструкция тянет картинку на 100% от контейнера. Разумеется, если контенер тянется. если он у вас инлайн-блок, или, инлайн (это кстати вообще ошибка) или блок с фикс шириной, то картинка не будет тянуться Link to post Share on other sites
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now