如何在保持比例的同时用图像填充 div? [英] How can I fill a div with an image while keeping it proportional?
问题描述
我找到了这个帖子 —
我在 IE9、Chrome 31 和 Opera 18 中成功测试了这一点.但没有测试其他浏览器.与往常一样,您必须考虑您的特定支持要求.
I found this thread — How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? — that is not entirely the thing that I want.
I have a div with a certain size and an image inside of it. I want to always fill-out the div with the image regardless if the image is landscape or portrait. And it doesn't matter if the image is cut-off (the div itself has overflow hidden).
So if the image is portrait I want the width
to be 100%
and the height:auto
so it stays in proportion. If the image is landscape I want the height
to be 100%
and the width to be
auto`. Sounds complicated right?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Since I don't know how to do it I simply created a quick image of what I mean. I can't even properly describe it.
So, I guess I'm not the first one asking this. However I couldn't really find a solution to this. Maybe there is some new CSS3 way of doing this - I'm thinking of flex-box. Any idea? Maybe it's even easier than I expect it to be?
If I correctly understand what you want, you may leave the width and height attributes off the image to maintain aspect ratio and use flexbox to do the centering for you.
.fill {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.fill img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
<div class="fill">
<img src="https://picsum.photos/id/237/320/240" alt="" />
</div>
I tested this successfully in IE9, Chrome 31, and Opera 18. But no other browsers were tested. As always you must consider your particular support requirements.
这篇关于如何在保持比例的同时用图像填充 div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!