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。

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

有人可以帮忙吗?

谢谢!

最佳答案

这可能是您所期望的。如果没有,请根据需要对此问题发表更多评论。

编辑
使用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 - CSS向下滚动图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48545798/

10-14 18:09
查看更多