如何自动调整图像大小以适合“flex-box”容器？
Posted
技术标签:
【中文标题】如何自动调整图像大小以适合“flex-box”容器？【英文标题】：How do I auto-resize an image to fit a 'flex-box' container? 【发布时间】：2020-01-31 10:27:15 【问题描述】：如何自动调整大图像的大小，使其适合较小宽度的 flex 容器，同时保持其宽高比？
此外，解决方案不得与vw / vh 相关，以便在页面上除此组件之外还有更多内容。
它应该是这样的：
这是我的代码：
body
margin: 0;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
.header
flex: 0 0 100px;
background-color: cornflowerblue;
.content
text-align: center;
.image
width: 100%;
height: 100%;
.footer
flex: 0 0 100px;
background-color: cornflowerblue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" />
</div>
<div class="footer"></div>
</div>
</body>
</html>我在这里找到的解决方案没有帮助
How do I auto-resize an image to fit a 'div' container?（非弹性上下文） Resize images to fit display:flex divs（图片固定大小，我需要动态大小）【问题讨论】：
【参考方案1】：只需将 图像类 width 更改为小于 100%，例如 50% 60% 或 70；
body
margin: 0;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
.header
flex: 0 0 100px;
background-color: cornflowerblue;
.content
text-align: center;
.image
width: 50%;
height: 100%;
.footer
flex: 0 0 100px;
background-color: cornflowerblue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" />
</div>
<div class="footer"></div>
</div>
</body>
</html>【讨论】：
【参考方案2】：您也可以通过计算.content 的宽度并根据需要减去多少来做到这一点。如下所示...
.content
width:calc(100% - 100px);
margin:0 auto;
body
margin: 0;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
.header
flex: 0 0 100px;
background-color: cornflowerblue;
.content
width:calc(100% - 100px);
margin:0 auto;
.image
width: 100%;
height: 100%;
.footer
flex: 0 0 100px;
background-color: cornflowerblue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" />
</div>
<div class="footer"></div>
</div>
</body>
</html>【讨论】：
sbrrk，问题不在于我需要在图像周围进行水平填充。问题是它的大小没有根据 flex 容器正确改变。图片不应该占用比它的 flex 父级更多的宽度和高度，同时保持它的原始宽度：高度比。以上是关于如何自动调整图像大小以适合“flex-box”容器？的主要内容，如果未能解决你的问题，请参考以下文章