Jump to content

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


Recommended Posts

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

Link to post
Share on other sites
  • VIP

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

 

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

 

img {
    height: auto;
    max-width: 100%;
}
 
почистите кэш и проверьте еще раз.

 

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

Link to post
Share on other sites

Почему бы не использовать замечательные возможности 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

 

Почему бы не использовать замечательные возможности 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

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

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

 

 

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

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

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

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...