1

我的文章中有几个带有图像的 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 解决方案也会很棒，因为这是一个移动站点。

4

2 回答 2

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>
于 2012-10-02T20:43:25.250 回答
0

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

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

您可以将“文本顶部”更改为许多内容，w3c 在此处列出它们：http: //www.w3schools.com/cssref/pr_pos_vertical-align.asp

于 2012-10-02T20:50:10.160 回答