使响应图像适合父容器 [英] Make responsive image fit parent container

问题描述

我一直在试图找出是否有一个纯CSS解决方案，以确保我的横幅内的图像不会低于父的高度，但保持图像的比率。

I've been trying to figure out if there is a pure CSS solution to ensure the image within my banner doesn't go below the height of the parent but keep ratio of the image.

您可以在这里看到演示： http://jsfiddle.net/LkxYU/1/

You can see a demo here: 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％，但不能低于300px高度。这将意味着图像截断，但是很好，我只是想知道是否有一个纯CSS解决方案，或者如果我需要使用jQuery

My aim is to have the image always 100%, but never below 300px in height. This would mean image cutoff, but thats fine, i just want to know if there is a pure CSS solution, or if i need to use jQuery

推荐答案

而不是使用< img>标签，我把这个图像的背景图像为一个div，并给它以下样式：

Instead of using an < img > tag, I made that image the background-image for a div and gave it the following styles:

.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/

here's the fiddle I was using: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

这里是完整的HTML和CSS：

Here's the complete HTML and 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;
}

这篇关于使响应图像适合父容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！