Масштабируемость фото на сайте

Рейтинг: 0Ответов: 2Опубликовано: 14.12.2014

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

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

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

▲ 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