使响应式图片适应父容器

Question

我一直在尝试找到纯CSS解决方案，以确保横幅中的图像不会低于父元素的高度，但保持图像的比例。

您可以在此处查看演示：http://jsfiddle.net/LkxYU/1/

HTML：

<div class="banner_holder">
    <img src="http://placekitten.com/g/800/600"/>    
</div>

CSS：

.banner_holder{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.banner_holder img{
    width: 100%;
}

我的目标是让图片始终保持100％的大小，但高度不低于300像素。这意味着图片会被裁剪，但没关系，我只想知道是否有纯CSS解决方案，或者我需要使用jQuery。

- Gerico

Answer 1

我没有使用 <img> 标签，而是将该图片作为一个 div 的背景图片，并进行了以下样式设置：

.banner_holderImage{
    height: 100%;
    position:relative;
    background:   url("http://placekitten.com/g/800/600")no-repeat;
    background-size: cover;
    background-position: center;
}

这是我使用的代码片段链接：http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

以下为完整的HTML和CSS代码：

<div class="banner_holder">
    <div class="banner_holderImage"></div>  
</div>

.banner_holder{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.banner_holderImage{
    height: 100%;
    position:relative;
    background:   url("http://placekitten.com/g/800/600")no-repeat;
    background-size: cover;
    background-position: center;
}

- Mathias Rechtzigel

---

我不知道为什么我没有想到背景图片！非常感谢你的好答案。 - Gerico

背景图片无法与Google机器人和蜘蛛一起使用，因此该图片将不会在搜索中出现。在需要展示和可搜索的产品或物品的情况下不应使用。 - Raffaeu

@Raffaeu，您可以使用图像标签定义将背景图像添加到站点地图。请参见此处了解更多信息-https://support.google.com/webmasters/answer/178636虽然这是一个轻微的解决方法，但错误地假设谷歌无法爬取背景图像。 - Mathias Rechtzigel

好知道，我之前不知道这个。 - Raffaeu

Answer 2

根据屏幕大小，您的图像可能会失去比例，为什么不尝试使用背景图像：

.banner_holder{
  width: 100%;
  height: 300px;
  min-height: 200px;
  position: relative;
  outline:1px dotted red;
  background: url('http://placekitten.com/g/800/600') center no-repeat;
  background-size: cover;
}

或者你可以在图片标签中添加最大高度：

.banner_holder img{
  width: 100%;
  max-height: 300px;
}

- jabs83

Answer 3

尝试：

.banner_holder img{
height: 100%;
/* OR */
height: inherit;
}

- Adriana

Answer 4

使用max-height和max-width确保图像始终适合父级div：

.banner_holder{
    width: 200px;
    height: 300px;
    position: relative;
    outline:1px dotted red;
}

.banner_holder img{
    max-width: 100%;
    max-height: 100%;
}

编辑：抱歉，我没看到你提到了300像素的截断问题 :) MathiasaurusRex的回答是正确的。

- Arius