Question

我目前正在使用CSS裁剪图像：

<div class="crop">
    <img src="image.png" alt="">
</div>

.crop {
width: 150px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 150px;
height: auto;
margin: 0 0 0 0;
}

这样，它可以水平对齐容器内的图像。但是，我不知道如何在中心垂直对齐图像（所以它在中间正确）。有什么帮助吗？

Answer 1

/ *就这样离开这里.. * /

.crop {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin: 8px;
}
.crop img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Answer 2

使用这些类：


.center-crop-img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

.center-crop-img-cover {
  object-fit: cover; /* cover image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

.center-crop-img-contain {
  object-fit: contain; /* contain the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

.center-crop-img-scale-down {
  object-fit: scale-down; /* scale-down the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
}

Answer 3

根据@RanSch的建议，您可以使用剪辑属性裁剪图像。

.imgClass{
   clip:rect(top,right,bottom,0px);
   margin-top: //someValue or
   vertical-align: middle; //or
   top: //someValue or
}

Answer 4

使用

 .crop img{top:50%; left:50%;}

或使用 -

 .crop img{vertical-align:middle;}

CSS“裁剪”图像，但在垂直方向上对齐

4 个答案: