使子元素比父元素宽

Question

我有一个720px的包装宽度，里面有一些段落和图像。我需要段落宽度为720px，但图像应该更宽(900px(，并且应该扩展包装宽度。我该怎么做？

<div class="wrapper">
<p>...</p>
<img>
<p>...</p>
<img>
</div>

Answer 1

基本上你不需要做任何特别的事情。请参阅.wrapper元素上设置的橙色边框，宽度为720px。只要你没有做任何其他事情(你没有在问题中列出(。。。

.wrapper {
width: 720px;
border: solid 5px orange;
}

<div class="wrapper">
<p>...</p>
<img src="https://picsum.photos/900/700">
<p>...</p>
<img>
</div>

Answer 2

.wrapper{
width:fit-content;
}
img{
width:900px;
}

<div class="wrapper">
<p>...</p>
<img src="https://eoimages.gsfc.nasa.gov/images/imagerecords/146000/146220/lakebaikalring_oli_201692_th.jpg">
<p>...</p>
<img src="https://eoimages.gsfc.nasa.gov/images/imagerecords/146000/146220/lakebaikalring_oli_201692_th.jpg">
</div>