缩放时仅从右侧剪切图像

Question

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

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

不知道这是不是你想要的。看一看。当你想用 margin:auto 居中时，需要指定宽度。

<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>

Answer 2

如果图片比视口宽，也可以使用此图片设置组合使其水平居中：

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>

缩放时仅从右侧剪切图像

Image cuts only from right when scaling

html

css

image

centering