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

我有一堆图像都适合400px×400px的框（即，其中一个尺寸为400px，另一个尺寸较小）。我希望能够使用CSS，但必要时使用jquery/javascript，使图像适合200 x 200像素的框，以使图像的两个边缘与盒子接触，并且其他两个边缘之间存在间隙盒子。长宽比必须保持不变。如何使用CSS将图像放入200像素的方框中？

我的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; 
}

你可以看到一个样本here。

不幸的是，我的风景图像拥抱箱子的顶部，而我希望它们居中。另外，我不确定依靠max-width/max-height的明智之举。

我该如何将这些图像放在这些框中？

来源

2009-08-24 Eric

只有我已经能够做到垂直居中是计算父的大小和的大小孩子，然后设置孩子相对于父母的位置，使其居中。如果您的定位支持他们的浏览器，则最大宽度和最大权重都可以。 – JoshBerke 2009-08-24 15:18:30

我在我的电脑上设置了它，它工作正常。查看您的示例页面后，问题是因为您已将图像设置为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等）是“内嵌块” - 这意味着它们像文本一样内联，但具有宽度和高度。

来源

2009-08-24 16:07:59 DisgruntledGoat

肖像图片的顶部似乎有像素偏移（请参阅上一个链接）。任何想法为什么？ – Eric 2009-08-30 15:54:37

我不是100％确定的，但是对于文本来说它会很奇怪（尽管那里没有文字）。将'div.images div.small'设置为'line-height：98px;'或将'font-size：1％'添加到'div.images div.small img'。 – DisgruntledGoat 2009-09-01 00:46:18

你尝试使用：

display:block; 
margin-left:auto; 
margin-right:auto;

应该居中块级元素

来源

2009-08-24 15:01:33 knittl

我的印象是''是一个内联元素。无论如何，这不适用于垂直居中。 – Eric 2009-08-24 15:08:54

哦，我的坏，它是一个内联元素。编辑我的答案。如果您的容器div具有固定的高度，那么'margin：auto;'应该以垂直居中。 – knittl 2009-08-24 15:36:07

'margin：auto'只能水平居中，而不是垂直居中。 – DisgruntledGoat 2009-08-24 16:11:51

我需要做同样的前一段时间，我发现了一个很好的实施this link。 “在div中垂直和水平居中图像，不知道图像的大小”。

它适用于我的预期。

来源

2009-08-24 15:14:15 GmonC

太棒了，我不知道你可以在CSS中做到这一点。 – Zoidberg 2009-08-24 15:17:04

我会远离表达式和其他IE黑客，我不知道他们甚至是必要的。 – DisgruntledGoat 2009-08-24 16:14:35

主要的问题是图像需要拉伸以适合盒子，同时保持图像的高宽比。我非常确定这种居中可以通过'line-height'实现。我的问题是调整图像大小。 – Eric 2009-08-26 08:39:49

我就遇到了这个垂直居中问题一次得到它在所有浏览器正常工作，我使出的JavaScript/jQuery的：

$(document).ready(function() { 
    $('img').each(function() { 
     image_height = $(this).height(); 
     margin_top = (200 - image_height)/2; 
     $(this).css('margin-top', margin_top + 'px'); 
    }); 
});

请注意，您将需要$（窗口）.load代替$（document）.ready如果图像尺寸没有在html中给出。

来源

2009-08-24 17:19:53 jeroen

这是一个解决方案，无论您想要多大尺寸都可以工作。它将缩小但不是高档，垂直和水平居中，只使用CSS。我花了一段时间才弄明白。

将您的<img>放入<div>之内，然后根据需要放置div。，给它你想要的大小，一定要设置position属性），然后再应用此：

.mydiv > .myimg { 
    vertical-align: bottom; 
    max-height:  100%; 
    max-width:  100%; 
    position:  absolute; 
    margin:   auto; 
    top:   0; 
    right:   0; 
    bottom:   0; 
    left:   0; 
}

来源

2013-12-18 07:33:24

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

回答

相关问题