Адаптивное изображение

[dzhenkins 49]

Всем привет. Весь интернет перекопал, не могу сделать так, что бы картинка ресайзилась. Width:100% не покатит, так как есть определенные условия. Картинке задается статичный размер в теге img (например ширина 300, высота 300). Как только экран например будет 150, то соответственно и картинка пропорционально должна уменьшиться. Пробовал max-width: 100% - в хроме работает, в остальных браузерах не хочет... Может быть кто то сталкивался уже с таким вопросом? Помогите пожалуйста.

[styoplotr 514]

Если задать родительскому блоку размеры по 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>

Или я вас не правильно понял?

[Macdec 139]

Должно работать

 

img {

    height: auto;

    max-width: 100%;

}

 

почистите кэш и проверьте еще раз.

[dzhenkins 49]

[Olezhko 9]

img {

    display:block;

    width:100%;

    height: auto;

}

[dzhenkins 49]

 

Должно работать

 

img {

    height: auto;

    max-width: 100%;

}

 

почистите кэш и проверьте еще раз.

 

хм... я конечно сейчас ещё раз попробую... но, повторюсь, заработало только в хроме... почищу кеш, открою в анонимном окне...

[Olezhko 9]

нужно изображение как блок определить!

[zenn 266]

Почему бы не использовать замечательные возможности CSS3 ?

Допустим что ваша картинка слинкована с классом "image-responsive" (<img class="image-responsive" scr="" />)

/** Самый малый размер **/
.image-responsive {
    width: 100px;
}

/** Если мин. по длине для девайса >= 768px - ставим 300px для картинки, ну и в том же духе далее. **/
@media (min-width: 768px) {
    .image-responsive {
         width: 300px !important;
    }
}

[dzhenkins 49]

нужно изображение как блок определить!

нет... это никак не повлияет 

[dzhenkins 49]

 

Почему бы не использовать замечательные возможности CSS3 ?

Допустим что ваша картинка слинкована с классом "image-responsive" (<img class="image-responsive" scr="" />)

/** Самый малый размер **/
.image-responsive {
    width: 100px;
}

/** Если мин. по длине для девайса >= 768px - ставим 300px для картинки, ну и в том же духе далее. **/
@media (min-width: 768px) {
    .image-responsive {
         width: 300px !important;
    }
}

а это вариант! спасибо! конечно придётся несколько правил писать.....

[Olezhko 9]

нет... это никак не повлияет 

да ладно, давай сайт в ЛС, посмотрим. 

[dzhenkins 49]

да ладно, давай сайт в ЛС, посмотрим. 

не дам, такой html пример очень просто верстануть 

[zenn 266]

да ладно, давай сайт в ЛС, посмотрим. 

Не сработает если родительские блоки в dom-дереве жестко не определены как резина (не указаны атрибуты height: %) - если по дереву хоть у 1 элемента не будет указателя процентной высоты/ширины - то без смысла внутри блока задавать auto атрибут и height/width 100%.

 

 

а это вариант! спасибо! конечно придётся несколько правил писать.....

Это лучше, чем перепиливать вашу верстку полностью в респонсивное представление, если верстка выполнена в статичном ключе. П.с. - для спасибок вроде бы кнопку придумали, уже давно.

П.п.с. - как элемент пропаганды качественной верстки - взгляните на сетку bootstrap и zubr.foundation.

[Ten 79]

А если использовать яваскрипт? Типа вот так http://stackoverflow.com/questions/1143517/jquery-resizing-image

[silicoid 52]

Народ правильно написал

img {
 display:block;
min-width:10px;
max-width:1000px;
width:100%;
}

эта конструкция тянет картинку на 100% от контейнера. Разумеется, если контенер тянется.

если он у вас инлайн-блок, или,  инлайн (это кстати вообще ошибка) или блок с фикс шириной, то картинка не будет тянуться