html - 缩放时仅从右侧剪切图像

Question

我试图将这个大图像居中。每次我把图像放大时，窗口只会切到他的右侧。它看起来不像那样居中。我也不需要它在绝对位置，因为我不想横向滚动。

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>

Answer 1

如果图像比视口(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>