6

我一直试图弄清楚是否有一个纯 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

4

4 回答 4

22

我没有使用 < 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;
}
于 2013-11-04T23:40:59.153 回答
1

根据屏幕大小，您的图像将不可避免地不成比例，为什么不尝试背景图像：

.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;
}
于 2013-11-04T23:41:02.403 回答
0

尝试： 

.banner_holder img{
height: 100%;
/* OR */
height: inherit;
}
于 2013-11-04T23:35:26.383 回答
0

使用 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%;
}

编辑：对不起，我错过了你写的关于 300px 截断内容的部分 :) MathiasaurusRex 的回答是正确的。

于 2013-11-04T23:39:59.137 回答