Проблема с масштабируемостью фото на сайте! Есть фото с размером 1903x200, проблема в том, что при полной развернутости браузера на весь экран все отображается хорошо, но стоит только свернуть экран вдвое меньше, как фото начинает выходить за рамки сайта. Подскажите, пожалуйста, в чем моя ошибка и как можно ее исправить?!
3 ответа
Чтобы сработало max-width: 100%, нужно обязательно задать обертке картинки динамическую ширину: или max-width или width в процентах, но только не жесткую. Или вообще не задавать, но это зависит от ситуации. В примере ниже можно и без ширины обертки добиться желаемого. Но в верстке желательно задавать ширину. http://jsfiddle.net/oyn16a67/2/
-
В данной ситуации автор, скорее всего, просто img-шку поместил в страницу, следовательно за body картинка не выйдет.– aciderntCommented 14 дек. 2014 в 19:49
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;
}
Ни в чем. Просто задайте для картинки максимальную ширину в 100%.
img {
max-width: 100%;
}
-
-
1