以下是HTML:

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

而且有更少的:
.image-container{
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  img{
    width: 100%;
    margin: 0 auto;
  }
}

图像大多width: 1600px,但高度未知。
屏幕宽度大多小于1600px。
我希望图像可以显示它的中心部分,即使在小屏幕上。图像的高度未知。
容器的高度应该等于图像的高度,因为一个块让余波不重叠。
当前的LESS不能像预期的那样工作。

最佳答案

您需要为父级添加height
通过添加image来定位position:absolute

.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="http://placehold.it/1600x200" />
</div>

关于html - CSS如何让图像大于屏幕?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27884187/

10-12 12:18
查看更多