Sign in to follow this  
Followers 0
dzhenkins

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

15 posts in this topic

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

 

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

 

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

 

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

Share this post


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;
    }
}
Ten and dzhenkins like this

Share this post


Link to post
Share on other sites

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

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

Share this post


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;
    }
}

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

 

 

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.