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/