使响应式图像适合父容器

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

来源

2013-11-04 Doidgey

而不是使用< 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-04 23:40:59

我不知道为什么我没有想到背景图片！感谢您的出色答案 – Doidgey

背景图片不适用于Google机器人和蜘蛛，因此图片无法用于搜索。不应使用在产品或项目的情况下显示和搜索 – Raffaeu

@Raffaeu您可以使用图像标记定义添加背景图像到您的站点地图。详情请参阅https://support.google.com/webmasters/answer/178636 虽然这只是一个小小的解决方法，但假设Google无法抓取背景图片是错误的假设。 –

尝试：

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

来源

2013-11-04 23:35:26 Adriana

使用最大高度和MAX-宽度，以确保图像将总是适合父DIV：

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

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

编辑：对不起，我错过了一部分，你写了300像素截止的东西:) MathiasaurusRex的答案是正确的。

来源

2013-11-04 23:39:59 Arius

您的图片难免会出这取决于屏幕尺寸比例的，为什么不尝试一下背景图片：

.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-04 23:41:02 jabs83

使响应式图像适合父容器

回答

相关问题