关于第五区域高度自适应的问题
来源：3-2 作业题
夜魇丶
2019-12-31 16:20:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
vertical-align: top;
border: none;
width: 100%;
}
/*第五区域*/
.fifth {
width: 100%;
background: url('img/bg.jpg') no-repeat;
background-size: cover;
}
.fifth .container {
padding: 3.25rem 2.5rem 3.75rem;
display: flex;
flex-direction: column;
align-items: center;
}
.fifth-title {
font-size: 0.9rem;
display: block;
width: 100%;
line-height: 2.5rem;
color: #3f3b35;
}
.fifth-picbox {
width: 100%;
justify-content: space-between;
align-items: center;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.fifth-img {
width: 100%;
flex: 0 0 32%;
}
</style>
</head>
<body>
<div class="fifth">
<div class="container">
<div class="fifth-title">主打课程</div>
<div class="fifth-picbox">
<div class="fifth-img"><img src="img/1.jpg" alt="1"></div>
<div class="fifth-img"><img src="img/2.jpg" alt="2"></div>
<div class="fifth-img"><img src="img/3.jpg" alt="3"></div>
<div class="fifth-img"><img src="img/4.jpg" alt="4"></div>
<div class="fifth-img"><img src="img/5.jpg" alt="5"></div>
<div class="fifth-img"><img src="img/6.jpg" alt="6"></div>
</div>
</div>
</div>
</body>
</html>
图片的高度不是一个尺寸的。如果要拉伸图片的话，就要给图片父元素设置高度，然后让图片的高度100%。
但是给图片父元素设置高度的话，当拉伸页面尺寸的时候，图片就会变形，没办法等比例放大缩小。
如果同时给父元素的宽度也设置尺寸的话，那就不能用flex：0 0 32% 而是换成weith: xxrem和xx%的形式。
这样做感觉很蠢，而且拉伸页面，图片也不是自适应的状态……
所以我想问一下，如果是栅格布局的情况下，图片大小不一致。但是给父元素加了高度，拉伸页面图片会变形。这种情况下，我应该怎么解决。（如果是手动改图片尺寸，让其保持一致的话…那。。）
希望能给个解决办法…在这个地方磨了快两个小时了。。。
辛苦解答。
2回答
-
好帮手慕码
2019-12-31
同学你好，针对你的问题如下解答：
（1）如果想使用flex的话，可以参考如下写法：
效果：
（2）不使用栅格布局，这样也是可以的。毕竟代码是比较灵活的，以实现效果为准；
（3）不是的，不是等比例的图片也可以实现，等比例的效果是最好的，没有对图片造成太大的拉伸。一般实际工作中，同类的图片ui设计师会切为大小一致的图哦~
如果的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
夜魇丶
提问者
2019-12-31
另外，如果放弃栅格布局的话：大概就是自己设置宽高了，这样可以实现效果。（虽然实现的很粗糙）
.fifth-img {
/*flex: 0 0 32%;*/
width: 33%;
height: 12.0rem;
padding: 1%;
}
.fifth-img img {
height: 100%;
}所以栅格布局的应用范围是等比例的图片么…感觉没学明白，辛苦老师解答了。
0
相似问题