将图像调整为div

Question

我有一个div作为值的百分比，我需要一个适合它的图像。 宽度应调整大小以适合div，而超出div的图像高度应隐藏。

（更清晰的视觉解释）

this is what I have so far（编辑：粘贴错误的链接，我的不好）

html：

<div class="wrap">
    <img  class="imgofcrap" src="http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg" />
</div>

css：

div.wrap {
width: 20%;
height: 5%; 
overflow:hidden;
        border: 2px solid black; }

img.imgofcrap{
width: 100%;
    height: auto; }

Answer 1

我确实在寻找响应式图像。 所以请查看下面的JSfiddle URL

img.imgofcrap{
    max-width:100%;
    height: auto;
    display:block;
}

JSFiddle Link

Answer 2

更改为：

img.imgofcrap{
    width: 100%;
    height: auto; 
}

fiddle

另请查看The difference between width:auto and width:100%

Answer 3

很简单，你很亲密。

因此，我们只想使用width的{​​{1}}，因此我们将其设置为img。由于父母有一个100%，它会使用它。现在您已将父级设置为百分比width。但是height没有父div。所以我们使用：

设置它

height

现在我们有：

html, body {
    height: 100%;
}

Demo Here

Answer 4

您正在寻找一个背景封面解决方案：如果您只需使用您在此处展示的图像，并且仅在最新的浏览器中使用

<div class="wrap"></div>



div.wrap {
    width: 20%;
    height: 5%; 
    overflow:hidden;
    border: 2px solid black; 
    background: transparent url("http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg") center;
    background-size: cover;
}

小提琴 here

如果您需要ie7 +支持，我制作了一个涵盖该项目的小项目 - 随意使用或扩展到您的需求：

https://github.com/sp90/backgroundCover