Я запускаю веб-сайт с жидким макетом. Он имеет заголовок полной ширины, левую часть с фиксированной шириной, необязательный фиксированный правый столбец ширины и область ширины переменной ширины между ними. Я ищу способ масштабирования изображения до полной ширины содержимого div.
Общая структура компоновки содержимого:
body{position:absolute;width:100%},div#content{position:absolute;left:300px;},div#article
Я хочу, чтобы изображение в div#article
масштабировалось до ширины div#article
масштабированной без этого изображения. Использование img{width:100%;}
не делает трюк. div#arcticle
будет расширяться до естественной ширины изображения и добавлять полосы прокрутки в окно просмотра.
В настоящее время я решаю проблему с помощью jQuery, чтобы масштабировать изображение до ширины контейнера после отображения страницы. Однако для этого потребуется дополнительный код, если окно браузера изменится.
Есть ли решение для этой проблемы?
Если нет, у кого-нибудь есть хорошая идея решить проблему изменения размера в JavaScript?
Не думайте, что вам нужен JavaScript, но здесь есть возможное решение CSS, которое использует фон-размер: обложка, которая заполнит ваш div.
body {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(path to image) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
box-sizing: 'border-box'
и остановитесь с абсолютным позиционированием.