Html 在div之外100%渲染图像

我正在为WordPress制作一个模板，需要在主内容分区的左侧和右侧渲染图像

我有一个100%宽度的包装div，这样图像就不会溢出屏幕，然后我给了图像位置：绝对（相对于内容div），右/左参数为负值（图像的宽度）

这很好，可以很好地将图像渲染到主要内容的左侧和右侧。但问题是，这些图像需要每隔一段时间更改一次，并且图像的宽度也会变化，因此左右偏移不再正确

如何在不知道宽度的情况下渲染div之外的图像？我试过左/右：-100%；，但这不起作用

这些图像纯粹是装饰性的，当屏幕太小时，它们不必（完全）可见

---

谢谢你的帮助

像这样的怎么样

这里有文字
* {
保证金：0；
填充：0；
}
#包裹{
宽度：100%；
}
#左图{
宽度：20%；
浮动：左；
}
#右图{
宽度：20%；
浮动：左；
}
#内容{
宽度：60%；
浮动：左；
}
img{
宽度：100%；
}

---

图像将根据屏幕大小进行缩放，并且始终位于内容的两侧

如果无法指定宽度并希望按原样显示图像（而不是缩放图像），则可以左右浮动图像，并在内容上使用overflow:hidden

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

.content {
overflow:hidden;}

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

但是，要正确呈现布局，您需要在html中具有以下结构：

.wrap>img+img+.content

---

事实上，我自己也想出了一些办法。contentdiv有一个静态宽度，所以我所做的是切换左右参数，并将其设置为contentdiv的宽度（加上一些填充）

Lorem ipsum dolor sit amet，是一位杰出的献身者。在自由之家的Donec nec前前庭luctus ut eget odio。Nunc mollis、nulla eget cursus porttitor、neque sem rhoncus est、nisl leo lacus的vel consequat。这是一个很好的例子。天妇之灵，元素扫描id，达比伯斯智人。Vivamus前庭enim nulla，id porttitor odio调味品ac.Pellentesque lacinia mollis elit tristique luctus。ullamcorper绿尾猴。维瓦摩斯·厄洛斯·奥奇、卢克图斯和佩伦茨克·康莫多、埃吉斯塔和维利特。这是一个秘密，一个封建的孕妇，一个临时的母亲。这是一种替代品。梅塞纳坐在阿梅特·法雷特拉·内克的座位上。埃尼安·达皮布斯是一位伟大的诗人。这是一个很好的例子。非前矢状肌、面部按摩中的伏隔肌。在自由的宣言中，我们要活下去。
.防止溢出{
溢出：隐藏；
宽度：100%；
}
.左侧图像{
位置：绝对位置；
右：320px；
}
.右侧图像{
位置：绝对位置；
左：320px；
}
.内容{
宽度：300px；
保证金：0自动；
位置：相对位置；
}

在我的初始代码中，

.Left side image

和

.Right side image

类的左/右（取决于图像的大小）为负数

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

.content {
overflow:hidden;}

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

<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;
}