绝对定位元素中的图像
我偶然发现了一个网站布局问题的解决方案，但我不确定这是不是标准的CSS实践。我已经在多个平台和浏览器上测试过它，它似乎得到了广泛的支持。
你可以在this page上看到我在说什么。链接到的网站不是我的网站，但使用相同的主题。我无法发布到我的网站的链接，因为我正在本地环境中工作。
特色图像位于带有position: absolute的元素中，图像本身被设置为width: 100%和object-fit: cover，并且是未定位的(即静态定位)。
问题是我使用的是产品图片，而object-fit: cover样式设置导致图片被截断。
解决方案是简单地将object-fit: cover设置更改为object-fit: contain，据我所知，这是默认设置。即使图像的宽度小于包含的元素，这也会使图像居中。
回答 1
Stack Overflow用户
发布于 2021-02-22 08:07:21
之所以会发生这种情况，是因为当您使用background-size: cover;时，它会扩展图像以覆盖div或元素的宽度。在你的例子中，图像被定位为center center，这就是为什么你有一些顶部和底部不可见的原因。我看到的唯一的方法是使用image分别增加元素的大小，或者调整图像的大小以适合div。
如果你想检查它是如何工作的。你可以做到这一点。
将contain
- add css属性
height: 962px;
更改为
- inspect element
-
background-size: cover
然而，这不是一个好主意。
如果你想要覆盖图像的特定区域，我会建议你保持它现在的方式，并调整background-position:。或者使用适合该div的图像。
另外，div的高度是由里面的内容控制的，所以要确保你也能控制这些内容。简单的方法是为带有背景图像的父div设置min-height。
让我知道这是否有帮助。
https://stackoverflow.com/questions/66308398
复制相似问题
腾讯云开发者
