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

Question

我尝试了一些响应式设计，让图像可以很好地缩放，而且不会太大以至于被浏览器的边缘截断；然而，当它太小以至于它没有完全(甚至远程)到达浏览器边缘时，在我看来它看起来不太好，特别是当它介于全尺寸和与文本段落相同的尺寸之间时。

我想给这些响应式图像一个更暗的背景，它总是从图像的左侧一直延伸到浏览器的边缘，并且与图像的高度相同。

没有背景:

我正在尝试做的事情:

由于这些图像是响应式的并且具有不同的纵横比，而且它们从来没有相同的高度，所以我不确定如何实现这一点。

附言我试过 border-left 但这会将图像本身推到右边(绝对定位没有帮助)并且轮廓不能只分配给一侧。

Answer 1

我不确定我是否已经清楚地理解您的问题。无论如何，我已经想出了一些关于您的要求的想法。检查下面我的 fiddle 示例。我没有专注于响应区域，但它会为您提供一些想法。

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

Have a Fiddle!