对齐图像的一部分

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

我试图在图像中清除它：
enter image description here

所以，红色边框是整个图像（它有4000px的宽度），但它有它只有一个主项。在我的情况下，一个女孩的照片。背景（除绿色边框外的红色边框内的所有内容）都充满了鲜花。我想要的是成为女孩（绿色边框），通过一切手段在中间对齐。取决于窗户的大小，花朵应该更多或更少可见（但没有滚动条）。

但我没有任何想法如何做到这一点...任何人的建议？

enter image description here

来源

2012-03-23 Michiel

+1对于蒙娜丽莎的美丽演绎你有。 – 2012-03-23 15:56:18

哈哈，哈哈:)谢谢你的赞美！ – Michiel 2012-03-23 15:57:13

我将图像分为两部分 - 花朵 - 用作中心div /表格012g上的bg以及将作为“” – Elen 2012-03-23 16:00:01

如果它是一个单一的装饰性图像，那么你可以使用：

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。

来源

2012-03-23 16:00:30 Kornel

感谢您的答案。这是一个单一的图像......如果我理解正确，上面的css会将图像与左边50％和右边50％对齐，对吧？但是如果图像宽度为4000像素，窗口只有1000像素，该怎么办？ – Michiel 2012-03-23 16:03:59

@Michiel background-position with'％'将图像中指定百分比的点与容器中具有相同百分比的点对齐，因此'50％'将图像的中间与容器的中间对齐 - 即在所有情况下完美对齐。 – Kornel 2012-03-23 17:12:57

我试过你的第一行代码，但没有运气......也许你会变得更好，我的意思是如果你在我原来的帖子中看到我的图像... – Michiel 2012-03-23 22:48:48

如果女孩处于图片的中心，这应该不成问题。只需使用图像作为body的background-image。使用CSS3可以使背景的大小调整到屏幕的整个宽度。如果容器的纵横比等于图像的比例，则使用background-size: contain;。如果不是，并且您仍然希望在不裁剪图像的情况下填充整个窗口，请使用background-size: cover;。另一种可能性是使用background-size: 100% auto;。

了解更多关于CSS3背景大小here

理想的情况下，这将是最好有女孩作为一个单独的图像和背景为一种模式，所以你可以使用该模式与重复-X和女孩在不同的容器上，即使你可以有CSS3的多个背景。但是，通过这样做（即针对不同背景的不同容器），您将拥有更好的跨浏览器支持。

来源

2012-03-23 16:09:09

对齐图像的一部分

回答

相关问题