以下是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/