gpt4 book ai didi

html - 调整图像大小以适合显示 :flex divs

转载 作者:太空宇宙 更新时间:2023-11-04 02:45:41 28 4
gpt4 key购买 nike

如何调整图像大小以适应 display:flex 子 div?请引用这个插件:http://plnkr.co/edit/zqdpqnV7QkKrx7lm1Tsi?p=preview

我试图缩放的图像是这样的:http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg

我在 Stackoverflow 上读到这可以使用 max-height 和 max-width 属性来完成,但我无法达到预期的结果。

我也读过这个但没有帮助: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%

我还发现 max-width: 100% 在 flexbox 布局中的图像上无法正常工作。我还没有看到(或能够找到)一个有意义的原因,只是“flexbox 是新的”而且浏览器似乎并没有像我们期望的那样处理所有事情。

另外,请记住,您不能在该 .card 上设置固定高度并期望图像正确适合,因为可用空间不太可能与图像的比例相匹配。因此需要 .card 的动态高度和带有 width: 100%;

的 img 的动态宽度

检查更新的插件:http://plnkr.co/edit/0CiALVFdKT1uioOjsmZe?p=preview

关于html - 调整图像大小以适合显示 :flex divs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33881457/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com