垂直放置较大的图像在一个较小的div

我有一个问题，这让我有点疯了。我有一个包含较大图像（没有固定尺寸）的小格子垂直放置较大的图像在一个较小的div

我将这张较大的图像放在100％的宽度上以缩小到适合框边界，但我需要图像在div内部垂直居中显示，而不是从上到下。

是否有一个简单的CSS修复？我一直在四处寻找，但没有多少运气。

Currently: Intended: 
--------  -------- 
| div /w | |overflow| 
| image |  --------  
--------  | div w/ | 
|overflow| | image | 
| image |  -------- 
--------  |overflow| 
       --------

来源

2010-09-03 Conor

不知道更多关于您的问题，还有你可以接近它的许多方面。

最有可能的是，如果将图片设置为div的背景（而不是将其放置在HTML中），它将解决您的问题;

div {background: url(image.png) center center no-repeat;}

我喜欢的另一种方法是使用position:absolute到图像准确定位，我想它。

此外，如果您打算使用vertical-align: middle的方法，请确保将其应用于图像，而不是包含div。

来源

2010-09-03 19:21:29

我想尝试这个CSS：

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; } 
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); }

来源

2010-09-03 18:13:59 sitesbyjoe

我会建议将图片粘贴在div中，然后居中div。有关如何执行此操作的详细说明here。

来源

2010-09-04 03:30:10 Azmisov

垂直放置较大的图像在一个较小的div

回答

相关问题