小编zor*_*dia的帖子
当图像高于容器时,垂直居中图像
我有一个响应式设计,头部图像放在容器中.图像有width:100%;,height:auto;因此在放大视口时会增长.我不想超过一定的高度,所以容器有一个max-height.图像仍在增长,但现在底部被切断,因为它与容器的顶部对齐.
我希望图像在其容器中垂直居中,以便图像的一部分在顶部和底部被切除.结果应如下所示:
用户上传标题图像,因此它们可能具有不同的高度,因此我无法使用特定的像素值.有没有CSS解决方案或我必须使用JavaScript？
这是代码:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>我准备了一个小提琴.
7
推荐指数
推荐指数
1
解决办法
解决办法
3218
查看次数
查看次数