如何使用CSS将图像放入200像素的方框中？

Question

我有一堆图像都适合400px×400px的盒子(也就是说,其中一个尺寸为400px,另一个尺寸较小).我希望能够,使用CSS,但jquery/javascript,如果有必要,将图像适合200px乘200px的盒子,这样图像的两个边缘触摸盒子,并且在另外两个边缘之间有一个间隙盒子.必须保持宽高比.

我的HTML如下:

<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

我的CSS是:

div.images div.small
{
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
}
div.images div.small img
{
    vertical-align:middle;
    max-width:200px;
    max-height:200px;
}

你可以在这里看到一个样本.

不幸的是,我的风景图像拥抱了盒子的顶部,而我希望它们居中.而且,我不确定依赖max-width/ 的智者max-height.

如何将图像置于这些框中？

Answer 1

我在我的电脑上设置它,它工作正常.查看您的示例页面后,问题是因为您已将图像设置为display:block.从您的一般img规则中删除该规则(无论如何都要设置全局的奇怪的事情),或者将您在上面发布的图像规则更改为:

div.images div.small img
{
    vertical-align: middle;
    max-width: 200px;
    max-height: 200px;
    display: -moz-inline-box; /* Firefox 2 */
    display: inline-block;
}

默认情况下,img元素和其他"替换"元素(Flash等)是"内联块" - 这意味着它们像文本一样内联,但具有宽度和高度.