css - 隐藏最大宽度/最大高度/溢出的div内的垂直对齐图像？答案

【问题标题】：css - vertical align image inside a div with max-width/max-height/overflow hidden?css - 隐藏最大宽度/最大高度/溢出的div内的垂直对齐图像？
【发布时间】：2012-10-03 14:41:15
【问题描述】：

我的文章中有几个带有图像的 div，我正在使用 max-width/height 和 overflow:hidden 裁剪图像，效果很好，但是它从顶部裁剪图像，我希望它们垂直居中在 div 中。

.image_div {
    max-height: 150px; 
    max-width:99%; 
    overflow: hidden; 
    margin:0px; 
    text-align:center;
}
.image_div img {

}

我使用最大宽度/高度来避免在图像很小的情况下出现一大块白色。我正在寻找的可能是 css 吗？

还应该提到 CSS3 解决方案也很棒，因为这是一个移动网站。

【问题讨论】：

您是否考虑过调整图像大小而不是裁剪它们？如果您只是在 .image_div img css 规则中设置高度/宽度，它应该会为您调整图像大小而不进行裁剪。
问题是这些图像来自没有指定宽度/高度的提要，并且图像的大小从 100x100 到 800x800 不等，因此在裁剪的 div 中将图像垂直/水平居中的 css 解决方案是太棒了。
如果它们的纵横比不同，为 css 设置宽度/高度会扭曲它们。
纵横比注释是正确的 - 您必须在 javascript 中执行一些操作，获取实际高度/宽度，然后确保在调整大小时保留比例。选择你的毒药。
将图片设置为背景图片并使用背景位置center center怎么样？

标签： css overflow

【解决方案1】：

<style type="text/css">
.imgsquare {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    border: solid 1px #666;
    background-color: #333;
    border-radius: 4px;
}
.imgsquare * {
    vertical-align: middle;
}

.imgsquare {
    display: block;
}
.imgsquare span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>

<!--[if lt IE 8]>
<style>
.imgsquare span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

这将绘制一个方形 div，其具有以原始纵横比垂直/水平居中的图像
使用：

<div class="imgsquare" style="width:280px; height:280px;">
    <span></span>
    <img style="max-width:260px; max-height:260px;" src="yourPicture.jpg" alt="No Image">
</div>

【讨论】：

【解决方案2】：

我相信你可以像这样使用垂直对齐：

.image_div {
    max-height: 150px; 
    max-width:99%; 
    overflow: hidden; 
    margin:0px; 
    text-align:center;
    vertical-align:text-top;
}

您可以将 'text-top' 更改为许多内容，w3c 在此处列出它们： http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

【讨论】：