首页 新闻 会员 周边

flex布局 让超过盒子大小的图片能够自适应盒子的大小 求助!

0
[已解决问题] 解决于 2021-12-02 16:44

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
border: red solid;
display: flex;
height: 100px;
}
#d2{
border: #000000 solid;
display: flex;
flex-direction: column;
}
#d3{
border: #0000FF solid;
/* display: flex; */
}
img{
height: 100%;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<span>巧克力蛋糕</span>
<div id="d3"><img src="img/首页/fre_1.jpg" ></div>
</div>
</div>
</body>

超神小火炮的主页 超神小火炮 | 菜鸟二级 | 园豆:208
提问于:2021-11-29 21:57
< >
分享
最佳答案
0

max-width:100%;
max-height:100%;

奖励园豆:5
漫冬飄雪 | 菜鸟二级 |园豆:207 | 2021-11-30 09:12

这样设置就忽略了上面的span标签呀 图片高度还是会超出

调整百分比就能解决 但是总觉得应该有更方便的方法
还是谢谢啦

超神小火炮 | 园豆:208 (菜鸟二级) | 2021-11-30 10:00
其他回答(2)
0

试试 object-fit: cover;

dudu | 园豆:31029 (高人七级) | 2021-11-29 22:01

还是不行呀 在img和d3都用contain fill试过了

支持(0) 反对(0) 超神小火炮 | 园豆:208 (菜鸟二级) | 2021-11-29 22:31
0

___mouM | 园豆:96 (初学一级) | 2021-11-30 19:18


一个边框厚度为3像素所以100-21-(4X3)=67

支持(0) 反对(0) ___mouM | 园豆:96 (初学一级) | 2021-11-30 19:22

@___mouM: 你的行类样式是写的还是生成的呀

支持(0) 反对(0) 超神小火炮 | 园豆:208 (菜鸟二级) | 2021-11-30 19:36

@超神小火炮: 我用文本文档打开 手写的 用开发工具的话会有提示的

支持(0) 反对(0) ___mouM | 园豆:96 (初学一级) | 2021-12-02 16:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册