对齐图像的一部分

Question

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

我试图在图像中说清楚：

因此，红色边框是整个图像（宽度为4000像素），但它只有一个主要项目。在我的情况下，一个女孩的照片。背景（绿色边框旁边的红色边框内的所有东西）都装满了鲜花。我想要的是成为中间对齐的女孩（绿色边框）。根据窗口的大小，鲜花应该或多或少可见（但没有滚动条）。

但我不知道如何做到这一点......有建议的人吗？

Answer 1

如果是单个装饰图像，则可以使用：

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

如果图像中有趣的部分不在中心位置，请调整第一个百分比。

如果您想为女孩使用单独的<img>，并为花朵单独分配图片，请使用<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;} ，例如

{{1}}

和前一种风格的背景。

如果您想成为最前沿的人，可以使用one of the usual vertical-CSS-centering hacks。

Answer 2

如果女孩位于照片的中心，这应该不是问题。只需将图片用作background-image的{​​{1}}即可。使用CSS3，您可以将背景调整为屏幕的整个宽度。如果容器的纵横比等于图像的比例，请使用body。如果不是，并且您仍希望填充整个窗口而不剪切图像，请使用background-size: contain;。另一种可能性是使用background-size: cover;。

详细了解CSS3 background-size here

理想情况下，将女孩作为单独的图像和背景作为图案会更好，所以你可以使用带有repeat-x的图案和不同容器上的女孩，即使你可以有多个背景用CSS3。但是，通过这样做（即不同背景的不同容器），您将获得更好的跨浏览器支持。