html - 仅显示图像的一部分而不使其成为背景图像？

Question

我有这样一张图片:

<div id="container">
  <img src="image.jpg">
<div>

我希望图像覆盖容器 div 的宽度和高度 - 现在图像很大并且溢出了容器的高度。但是，我无法将其转换为背景图像。

我试过:

#container {
width: 100%;
height: 200px;
overflow: hidden;
}

但是图片还是超过了高度。

有没有人知道一种方法可以实现用图像填充 div 的相同效果，就像使用 background-image 和 overflow:none 一样？

Answer 1

我不知道你到底需要什么。如果你拉伸(stretch)以适应它会变得扭曲 像这样:

width , height 等于容器的宽度。

否则你将不得不向图像添加css

img{
    height: 100%;
    or width: 100% whichever is less 
}

这就是你需要做的 在这里 fiddle :http://jsfiddle.net/tbfwq/

干杯!