html - css如何让图像比屏幕大？

Question

这是 HTML:

<div class="image-container">
  <img src="/path/to/a/image/maybe/bigger/than/screen"/>
</div>

还有 LESS:

.image-container{
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  img{
    width: 100%;
    margin: 0 auto;
  }
}

图像主要是 width: 1600px，但高度未知。

屏幕宽度大多小于 1600px。

我希望图像即使在小屏幕上也能显示它的中心部分。图片的高度未知。 并且容器的高度应该等于图像的高度，作为一个 block ，让后面的部分不重叠。

当前 LESS 无法按预期工作。

Answer 1

• 您需要为父级添加高度
• 通过添加 position:absolute 定位 image

.image-container {
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  border: 1px solid red;
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="image-container">
  <img src="https://placekitten.com/g/1600/200" />
</div>