Render images 100% за пределами div

Question

Я работаю над шаблоном для WordPress и должен визуализировать изображения слева и справа от основного содержимого div.

У меня есть оберточный div ширины 100%, поэтому изображения не переполняют экран, тогда я дал положение изображений: абсолютное (относительно содержимого div) и отрицательное значение (ширина изображение) справа/слева.

Это прекрасно работает и делает изображения красиво слева и справа от основного содержимого. Но проблема в том, что эти изображения должны меняться каждый раз, а ширина изображений меняется, поэтому левые и правые смещения не верны.

Как визуализировать изображения вне div, не зная ширины? Я пробовал Left/Right: -100% ;, но это не работает.

Изображения являются чисто декоративными и не должны быть (полностью) видимыми, когда экран слишком мал.

Спасибо за помощь!

Answer 1

Я сам что-то придумал. Содержимое div имеет статическую ширину, так что я сделал, это переключить левый и правый параметры вокруг и установить его в ширину содержимого div (плюс некоторое дополнение).

<div class='prevent-overflow'> 
    <div class='content'> 
     <img src='http://placehold.it/200X200' class='left-side-image' /> 
     <img src='http://placehold.it/200X200' class='right-side-image' /> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at libero nec ex vestibulum luctus ut eget odio. Nunc mollis, nulla eget cursus porttitor, neque sem rhoncus est, vel consequat leo lacus at nisl. Nulla ac sem eget lorem malesuada malesuada. Fusce in erat tempus, elementum sem id, dapibus sapien. Vivamus vestibulum enim nulla, id porttitor odio condimentum ac. Pellentesque lacinia mollis elit tristique luctus. Vivamus luctus ultricies ullamcorper. Vivamus eros orci, luctus et pellentesque commodo, egestas et velit. Duis ante velit, feugiat sed gravida ac, tempus sed odio. Praesent tincidunt risus id ex placerat rhoncus. Maecenas sit amet pharetra neque. Aenean dapibus a velit quis ultricies. Quisque aliquam erat nec est rutrum, nec ornare urna ultrices. Quisque accumsan purus non ex sagittis, in facilisis massa facilisis. Vivamus fermentum libero dictum neque laoreet, sit amet pretium dui luctus. 
    </div> 
</div> 


.prevent-overflow { 
    overflow:hidden; 
    width:100%; 
} 
.left-side-image{ 
    position:absolute; 
    right:320px; 
} 
.right-side-image{ 
    position:absolute; 
    left:320px; 
} 
.content { 
    width:300px; 
    margin:0 auto; 
    position:relative; 
} 

В моем первоначальном коде, я имел отрицательный влево/вправо (в зависимости от размера изображения) в .left-side-image и .right-side-image classess.

http://jsfiddle.net/6wp1h52c/

Answer 2

Как насчет чего-то подобного? http://jsfiddle.net/usL5vcqg/

<div id="wrap"> 
    <div id="leftImage"> 
     <img src="https://www.google.com.au/images/srpr/logo11w.png"/> 
    </div> 

    <div id="content"> 
     text goes here 
    </div> 

    <div id="rightImage"> 
     <img src="https://www.google.com.au/images/srpr/logo11w.png"/> 
    </div> 
</div> 

* { 
    margin:0; 
    padding:0; 
} 
#wrap { 
    width:100%; 
} 

#leftImage { 
    width:20%; 
    float:left; 
} 

#rightImage { 
    width:20%; 
    float:left; 
} 

#content { 
    width:60%; 
    float:left; 
} 

img { 
width:100%; 
} 

Изображения масштабируются в зависимости от размера экрана, и они всегда будут сидеть по обе стороны от содержания.

Answer 3

Если вы не можете указать ширину и хотите, чтобы отобразить изображение как есть (не масштабирование), вы можете плавать изображения вправо и влево и использование переполнения: скрытый от содержания

.left { 
float: left; 
margin-right: 20px;} 

.content { 
overflow:hidden;} 

.right { 
float: right; 
margin-left: 20px;} 

Однако, вам нужно будет иметь следующий в вашем то структура HTML для макета для визуализации correcty:

.wrap> IMG + IMG + .content

http://jsfiddle.net/h6u65hp8/1/