Размер изображения до полной ширины в жидком макете сайта

Question

Размер изображения до полной ширины в жидком макете сайта

0

Я запускаю веб-сайт с жидким макетом. Он имеет заголовок полной ширины, левую часть с фиксированной шириной, необязательный фиксированный правый столбец ширины и область ширины переменной ширины между ними. Я ищу способ масштабирования изображения до полной ширины содержимого 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?

Lars Hanke 16 апр. 2014, в 22:49

Источник

1

Используйте box-sizing: 'border-box' и остановитесь с абсолютным позиционированием.
AlienWebguy 16 апр. 2014, в 20:19
0

Пожалуйста, включите JSFiddle с соответствующим кодом проблемы. Благодарю.
iambriansreed 16 апр. 2014, в 20:22
0

@AlienWebguy да, выглядит многообещающе для редизайна сайта. Но вы уверены, что это решит основную проблему, то есть масштабирование изображения до конечной ширины контейнера с жидкостью? В этом случае, не могли бы вы намекнуть, почему?
Lars Hanke 17 апр. 2014, в 09:19
0

@iambriansredd пока нет проблемного кода. Когда вы сжимаете браузер, жидкий div должен сжиматься. Но поскольку он содержит изображение фиксированного размера, браузер будет прокручивать вместо него. Таким образом, при изменении размера вы можете уменьшить изображение до минимума, изменив размер div, а затем изменить размер изображения до div. Не уверен, как именно это можно сделать, но мне это тоже не кажется эффективным.
Lars Hanke 17 апр. 2014, в 09:34

Показать ещё 2 комментария

Теги:

jquery

html

css

image

1 ответ

Ещё вопросы

Используйте box-sizing: 'border-box' и остановитесь с абсолютным позиционированием.
Пожалуйста, включите JSFiddle с соответствующим кодом проблемы. Благодарю.
@AlienWebguy да, выглядит многообещающе для редизайна сайта. Но вы уверены, что это решит основную проблему, то есть масштабирование изображения до конечной ширины контейнера с жидкостью? В этом случае, не могли бы вы намекнуть, почему?
@iambriansredd пока нет проблемного кода. Когда вы сжимаете браузер, жидкий div должен сжиматься. Но поскольку он содержит изображение фиксированного размера, браузер будет прокручивать вместо него. Таким образом, при изменении размера вы можете уменьшить изображение до минимума, изменив размер div, а затем изменить размер изображения до div. Не уверен, как именно это можно сделать, но мне это тоже не кажется эффективным.

DivineChef · Answer 1 · 2014-04-16T19-07-00.000Z

Не думайте, что вам нужен 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;

}

Это создаст фон для тела. Мои изображения являются частью содержимого страницы и как блочный элемент должны заполнять ширину родительского элемента div.