侧栏缩略图拉伸

Question

如何防止我的图片在博主中的侧栏上伸展？我已经尝试了很多不同的CSS比如：

.container { 
    max-height: 400px; 
    max-width: 400px; 
} 

缩略图仍然捉襟见肘，我已经试过overflow:hidden;财产，以及，这工作，但削减了太多的图像和我宁愿他们调整大小。

这里的HTML：

<div id="container"> 
    <img src="http://2.bp.blogspot.com/-THybP4vxGMA/VpwN3LXD-jI/AAAAAAAAAcA/kpZkxwEH9P8/s1600/4afd422d987dac3041f33ffbf34f9367.jpg"/> 
</div> 

Answer 1

你必须以不溢出容器中加入max-width: 100%和max-height: 100%;的形象。您还必须将#container中的max-width和max-height更改为width和height。最后，您使用.container而不是#container。

#container { 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 
#container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div id="container"><img src="http://2.bp.blogspot.com/-THybP4vxGMA/VpwN3LXD-jI/AAAAAAAAAcA/kpZkxwEH9P8/s1600/4afd422d987dac3041f33ffbf34f9367.jpg"/></div>

Answer 2

我已经想通了解决方案：

#container { 
    width: 150px; 
    height: 150px; 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 

#container img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
}