缩放时图像仅从右侧切割

Question

我试图把这个大图像放在中心位置。每当我将图像放大时，窗口只会切割右侧。它看起来并不那么集中。此外，我不需要它在ABSOLUTE位置，因为我不想横向滚动。

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

如果图像比视口宽，请使用此设置组合使图像水平居中：

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>

Answer 2

不知道这是不是你想要的。看一看。 当你想要以边距为中心时：自动，需要指定宽度。

<style>
.container {
overflow:hidden;
border:1px solid red;
height:200px;
}

.slideimg{
display:block;
margin:auto;
height:100%;
width:200px;
border:1px solid #CCC;
position:relative;

}

</style>


<div class="container">

<img class="slideimg" src="images/back.jpg" >

</div>