调整图像大小以适合显示:flex div [英] Resize images to fit display:flex divs
问题描述
如何调整图像大小以适合display:flex child divs?请参考以下代码: http://plnkr.co/edit/zqdpqnV7QkKrx7lm1Tsi?p=preview
How do I resize an image to fit the display:flex child divs? Please refer to this plunk: http://plnkr.co/edit/zqdpqnV7QkKrx7lm1Tsi?p=preview
我要缩放的图像是这样的: http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg
The image that I am trying to scale is this: http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg
我在Stackoverflow上读到，可以使用max-height和max-width属性来完成此操作，但是我无法达到预期的结果.
I read on Stackoverflow that this can be done using max-height and max-width attributes but I am unable to achieve the desired result.
我也阅读了此内容，但没有帮助: http://www.w3schools.com/css/css_rwd_images.asp
I also read this but it doesnt help: http://www.w3schools.com/css/css_rwd_images.asp
CSS:
.card {
position: relative;
z-index: 2;
box-shadow: 0 0.1rem 0.2rem #aaa;
background: #fff;
border-radius: 0.2rem;
margin: 0.5rem 0 1rem 0;
height: 10rem;
display: flex;
flex-direction: column;
}
.card.sm {
height: 10rem;
}
.card.sm .card-action {
padding: 0.5rem;
}
.card.md {
height: 20rem;
}
.card.md .card-action {
padding: 1rem;
}
.card.lg {
height: 30rem;
}
.card.lg .card-action {
padding: 1.5rem;
}
.card .card-content {
padding: 1rem;
flex: 8;
overflow:auto;
overflow-y: scroll;
}
.card .card-content .card-title {
font-weight: bold;
font-size: 1.1rem;
}
.card .card-action {
flex: 2;
max-height: 5%;
padding: 1rem;
border-top: 0.1rem solid rgba(160, 160, 160, 0.2);
text-transform: uppercase;
}
.card .card-image {
position: relative;
flex: 24;
overflow:hidden;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div style="width:30rem">
<div class="card md">
<div class="card-image">
<img src="http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg"/>
</div>
<div class="card-content">
<span class="card-title">Title</span>
<p>Some content</p>
</div>
<div class="card-action">
<a href="#">ACTION 1</a>
<a href="#">ACTION 2</a>
</div>
<div class="card-action">
<a href="#">ACTION 3</a>
<a href="#">ACTION 4</a>
</div>
</div>
</div>
<div style="width:30rem">
<div class="card md">
<div class="card-content">
<span class="card-title">Title</span>
<p>Some content</p>
</div>
<div class="card-action">
<a href="#">ACTION 1</a>
<a href="#">ACTION 2</a>
</div>
<div class="card-action">
<a href="#">ACTION 3</a>
<a href="#">ACTION 4</a>
</div>
</div>
</div>
</body>
</html>
推荐答案
取消高度 .card.md 和 .card 并更改 max-width:100％； 到图像上的 width:100％.
Take the height off .card.md and .card and change max-width: 100%; to width: 100% on the image.
我还发现，最大宽度:100％在flexbox布局中的图像上无法正常工作.我还没有看到(或能够找到)一个有意义的原因，仅仅是"flexbox是新的"，浏览器似乎并没有像我们期望的那样处理所有事情.
I have also found that max-width: 100% does not work as expected on images within flexbox layouts. I have yet to see (or been able to find) a meaningful reason why, just that "flexbox is new" and browsers don't seem to handle everything as we expect.
此外，请记住，您不能在该 .card 上设置固定高度，并希望图像正确放置，因为可用空间可能与图像的比例不符.因此，需要 .card 的动态高度和 width:100％;
Also, bear in mind, you can't have a fixed height on that .card and expect the image to fit correctly as the available space will not likely match the proportions of the image. Hence the need for the dynamic height of the .card and the dynamic width of the img with width: 100%;
检查更新的插件: http://plnkr.co/edit/0CiALVFdKT1uioOjsmZe?p=preview
这篇关于调整图像大小以适合显示:flex div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
