我试图将这个大图像居中。每次我把图像放大时,窗口只会切到他的右侧。它看起来不像那样居中。我也不需要它在绝对位置,因为我不想横向滚动。
CSS
.container {
padding-top:70px;
overflow:hidden;
}
.slideimg{
display:block;
margin:auto;
height:800px;
}
HTML
<div class="container">
<img class="slideimg" src="images/back.jpg" >
</div>
最佳答案
如果图像比视口(viewport)宽,也可以使用图像的这种设置组合使其水平居中:
position: absolute;
left: 50%;
transform: translateX(-50%);
将heigth: 800px;
复制到容器DIV中,并为容器定义position: relative;
。这是完整的例子:
.container {
position: relative;
height: 800px;
padding-top: 70px;
overflow: hidden;
}
.slideimg {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 800px;
width: auto;
}
<div class="container">
<img class="slideimg" src="http://placehold.it/1500x1000/fa0">
</div>
关于html - 缩放时仅从右侧剪切图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43550480/