html - 对齐图像的一部分

Question

我想在我的网站上使用非常宽的图片。图像上有一个主要元素，其余的是背景。但我希望这个主要元素始终对齐，而图像应该根据窗口大小显示或多或少的背景......

我试图在图像中表达清楚:

因此，红色边框是整个图像(它的宽度为 4000 像素)，但它上面只有一个主要元素。在我的例子中，一张女孩的照片。背景(除了绿色边框之外的红色边框内的所有内容)都充满了一些花朵。我想要的是无论如何成为中间对齐的女孩(绿色边框)。并且根据窗口的大小，花朵应该或多或少可见(但没有滚动条)。

但我不知道该怎么做...有人有建议吗？

Answer 1

如果是单一的装饰图片，那么可以使用:

background-image: url(whole.jpg) 50% 50% no-repeat

如果您感兴趣的图像部分不在中心，请调整第一个百分比。

如果您想使用单独的 <img>对于女孩，对于花单独的图像，然后使用 one of the usual vertical-CSS-centering hacks对于 <img>例如

#container {position:relative; overflow:hidden}
#container img {position:absolute; top:50%; left:50%; 
    margin-top:-half-of-image-in-px; margin-left:-half-of-the-image-in-px;}

和前一种风格的背景。

如果你想走在前沿，可以用CSS3 object-fit property .