Сделать дочерний элемент шире, чем родительский

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>