仅显示图像的某些部分而不将其作为背景图像？

Question

我有一张图片：

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

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

我试过了：

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

但图像仍超出高度。

有没有人知道如何使用background-image和overflow:none来实现与图片一样填充div的相同效果？

Answer 1

我不确切知道你需要什么。如果你适应它会变得扭曲 像这样：

宽度，高度等于容器的宽度。

否则你必须将css添加到图像

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

这就是你需要做的一切  在这里摆弄：http://jsfiddle.net/tbfwq/

干杯！

Answer 2

试试这个

#container img{
width:100%;
}

这将设置图像的宽度等于其父div的宽度... 希望它对你有用.. 感谢