Как расположить изображение внутри div так, чтобы оно одинаково переполнялось слева и справа, а не только справа? [дубли ⇐ Html

[Anonymous]

Проблема: когда я помещаю изображение большей ширины, чем блок, в котором оно содержится, внутри блока div, оно переполняется только с правой стороны. Я хочу, чтобы он переполнялся обеими сторонами.
Почему я этого хочу: мне нужно расположить непропорционально длинные изображения (так называемые «не допускать» ленточные изображения) по всей странице. Однако когда я помещаю их за пределы всех блоков и применяю к ним абсолютное свойство, их положение относительно других элементов меняется, когда контент открывается на разных экранах. Это происходит из-за разных вариантов дизайна для разных экранов. Итак, я подумал, что могу поместить их внутри блоков div и заставить их переполняться слева и справа, чтобы предотвратить размещение.
Минимальный рабочий пример: https://jsfiddle.net/isgin/nx2wk60g/2/







body {
width: 100%;
height: 600px;
background-color: #000000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
div {
width: 300px;
height: 200px;
background-color: green;
}
img {
height: 20px;
}
.absolutely-positioned {
position: absolute;
top: 320px;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -right-equ