0

我有以下 HTML，可以更改，但希望保持简单。

<div class="c">
     <img ...>
</div>

图像将是可变大小的，并且应该在 div 中垂直居中。我目前正在使用以下 CSS：

.c {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.c img {
    width: 40px;
    height: auto;
}

我尝试在 CSS 中使用 table 和 table-cell 方法，但容器会扩展以适应图像，即使使用overflow: hidden. 我已经考虑过服务器端方法，例如在 上使用position: relative负值，但如果不需要，我不希望在页面上使用任何额外的服务器端处理。我不想使用 JavaScript，所以如果这是我唯一的其他选择，我会在服务器端进行。 我应该提一下，图像将始终为 40x40 像素或更大。top<img>

这个小提琴展示了我正在尝试的内容display: table。

4

3 回答 3

0

看看这里：http ://www.vanseodesign.com/css/vertical-centering/

你可以选择你觉得最舒服的方法。

于 2012-09-26T03:52:36.160 回答
0

.........................演示

嗨，现在习惯vertical-align:top在你的img tag throw css 中像这样

img {
     vertical-align:top;
}

现场演示

于 2012-09-26T04:41:14.373 回答
0

我决定采用一种更简单的方法，它不会在旧浏览器上缩放图像，但会在新浏览器上缩放，并且使用更少的代码。HTML 基本上可以只是一个<div>标签，使用这个 CSS。

div.image {
    background: url(IMAGE) center center no-repeat;
    background-size: cover;
}

这background-size: cover将允许符合 CSS3 的浏览器缩放图像以适合 div，而旧版本的浏览器仍将图像居中，但不会缩放它。这不是一个完美的解决方案，但肯定会适用于我的情况。

于 2012-09-26T07:09:23.277 回答