Я бы решил это одним из двух способов.Вот идея № 1:
CSS
#inner {width:400px; position:relative; float:left;}
HTML:
<div id="inner">
<img src="awesomeimage.jpg" alt="this awesome image" />
<p>text goes here</p>
<img src="awesomeimage.jpg" alt="this awesome image" />
</div>
SCRIPT:
<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
width : imgWidth + 'px'
});
</script>
Предполагается, что у вас есть jQueryзагружен, и что вы используете Javascript на своем сайте.Если вы хотите отрегулировать ширину изображения для отступов, полей и границ, сделайте это в переменной.
Вы можете иметь масштаб изображения с окном, как в примере, использованном в этой скрипте JS, которую я создал для другого вопроса: http://jsfiddle.net/D544n/1/
Идея # 2: Без JavaScript.
CSS
#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */
HTML:
<div id="outer">
<div id="inner">
<img src="awesomeimage.jpg" alt="this awesome image" />
<p>text goes here</p>
<img src="awesomeimage.jpg" alt="this awesome image" />
</div>
</div>
Селектор для этого был получен из другого ТАК вопрос .
ДонНе думаю, что вы найдете простой и понятный способ сделать это.Это две мои лучшие идеи, и их можно решить другими способами.Если вы идете по этому пути, чтобы организовать свой контент, вы, возможно, захотите переосмыслить свою стратегию для достижения своей цели.