0

Проблема с масштабируемостью фото на сайте! Есть фото с размером 1903x200, проблема в том, что при полной развернутости браузера на весь экран все отображается хорошо, но стоит только свернуть экран вдвое меньше, как фото начинает выходить за рамки сайта. Подскажите, пожалуйста, в чем моя ошибка и как можно ее исправить?!

3 ответа 3

1

Чтобы сработало max-width: 100%, нужно обязательно задать обертке картинки динамическую ширину: или max-width или width в процентах, но только не жесткую. Или вообще не задавать, но это зависит от ситуации. В примере ниже можно и без ширины обертки добиться желаемого. Но в верстке желательно задавать ширину. http://jsfiddle.net/oyn16a67/2/

1
  • В данной ситуации автор, скорее всего, просто img-шку поместил в страницу, следовательно за body картинка не выйдет.
    – acidernt
    Commented 14 дек. 2014 в 19:49
1

http://jsfiddle.net/wx9eb2rc/

HTML

<div>
    <span></span>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}

div{    
    max-width: 600px;
}
div span{
    display: block;
    background: url(http://i.sunhome.ru/foto/231/priroda-urala-v2.jpg);
    padding-top: 66.66%;  /* 400px/600px = 0.6666 */
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
}

http://htmlbook.ru/css/background-size

0

Ни в чем. Просто задайте для картинки максимальную ширину в 100%.

img {
    max-width: 100%;
}
2
  • не прокатывает!
    – Arty21
    Commented 14 дек. 2014 в 18:07
  • 1
    @Arty21 А скиньте код, пожалуйста, что вы там написали?
    – acidernt
    Commented 14 дек. 2014 в 19:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.