当响应图像太小而无法到达浏览器边缘时，背景延伸出来？

Question

尝试一些响应式设计，让图像能够很好地扩展，并且永远不会太大，以至于它被浏览器的边缘切断了;然而，当它如此之小以至于它不能（或甚至远程地）到达浏览器边缘时，我认为它看起来并不太好，特别是当它在完整之间时大小和文本段落大小相同。

我想为这些响应式图像提供一个较暗的背景，它始终延伸到图像的左侧，一直延伸到浏览器的边缘，并且与图像的高度相同。

没有背景：

我想做的事情：

由于这些图像具有响应性并且具有不同的宽高比，因此它们的高度从不相同，因此我不确定如何实现这一目标。

P.S。我尝试过边框左边但是将图像本身推向右边（绝对定位没有帮助），并且轮廓不能分配到一侧。

Answer 1

我不确定我是否清楚地理解了你的问题。无论如何，我想出了一些关于你的要求的想法。检查我的小提琴下面的样品。我并没有把注意力集中在响应区域，但它会给你一些想法。

#header, #bottom
{
color:#fff;
text-align:justify;
padding-left:30%;
}
 #content
{
background-color:#000;
text-align:right;
}

Have a Fiddle!