Html 使响应式图像适合父容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19779305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make responsive image fit parent container
提问by Doidgey
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.
我一直试图弄清楚是否有一个纯 CSS 解决方案来确保我的横幅中的图像不会低于父级的高度，但保持图像的比例。
You can see a demo here: http://jsfiddle.net/LkxYU/1/
你可以在这里看到一个演示：http: //jsfiddle.net/LkxYU/1/
html:
html：
<div class="banner_holder">
<img src="http://placekitten.com/g/800/600"/>
</div>
css:
css：
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
}
.banner_holder img{
width: 100%;
}
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
我的目标是让图像始终为 100%，但高度永远不会低于 300px。这意味着图像截断，但这很好，我只想知道是否有纯 CSS 解决方案，或者我是否需要使用 jQuery
回答by Mathias Rechtzigel
Instead of using an < img > tag, I made that image the background-image for a div and gave it the following styles:
我没有使用 < img > 标签，而是将该图像作为 div 的背景图像并赋予它以下样式：
.banner_holderImage{
height: 100%;
position:relative;
background: url("http://placekitten.com/g/800/600")no-repeat;
background-size: cover;
background-position: center;
}
here's the fiddle I was using: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/
这是我使用的小提琴：http: //jsfiddle.net/MathiasaurusRex/LkxYU/4/
Here's the complete HTML and CSS:
这是完整的 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;
}
回答by jabs83
Your image will inevitably be out of ratio depending on the screen size, why not try a background image:
根据屏幕尺寸，您的图像不可避免地会超出比例，为什么不尝试背景图像：
.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;
}
or you could just add a max height to your image tag:
或者您可以为图像标签添加最大高度：
.banner_holder img{
width: 100%;
max-height: 300px;
}
回答by Adriana
try:
尝试：
.banner_holder img{
height: 100%;
/* OR */
height: inherit;
}
回答by Arius
Use max-height and max-width to be sure that image will always fit the parent div:
使用 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%;
}
EDIT: Sorry, I miss the part where you wrote about 300px cut-off stuff :) MathiasaurusRex's answer is correct.
编辑：对不起，我想念你写了大约 300px 截止的东西的部分:) MathiasaurusRex 的答案是正确的。
