我使我的帖子缩略图全幅显示并响应。因为它们很高，所以我将其裁剪为600像素。问题在于，随着屏幕变大，图像会在顶部裁剪，而不是我想要的图像中心。有什么方法可以使图像在中心裁剪吗？我不想在background-image这里使用。
这是一个小提琴。
.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.large-front-container {
max-height:600px;
overflow: hidden;
}<div class="large-front-container">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg" class="large-front-thumbnail">
</div>.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translateY(-50%); /* add this line to move your picture 50% up*/
}
要在所有浏览器中使用：
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
但我建议您使用此处background-image描述的用例
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句