Question

On this page我有班级的图片：.moduleItemImage

这些图像需要裁剪为100％宽度和250px高度。

我已经设法通过以下代码实现了这一目标：

.moduleItemImage{
    width: 100%;
    padding:0px;
    margin:0;
    float:none;
    display:block;
    height:250px;
    line-height:200px;
    overflow: hidden;
}

但是，我希望图像垂直居中或向下滚动一点，可能是50px;

尝试垂直对齐，边距等，但没有任何效果。

有人可以帮忙吗？

谢谢！

Answer 1

这可能是你所期待的。如果没有，请在需要时再对该问题发表评论。

EDIT 使用object-positon更改裁剪上的图像位置。

.moduleItemImage {

  width: 100%;
  padding: 0px;
  margin: 0;
  float: none;
  display: block;
  height: 250px;
  line-height: 200px;
  overflow: hidden;
}

.moduleItemImage img {
    object-position: 0px -140px;
}

<div class="moduleItemImage">
<img src="https://www.portal-gestao.com/media/k2/items/cache/cc4d19bea0c6bf7034d0923c98a24c20_XL.jpg">
</div>

CSS向下滚动图像

1 个答案: