老师，好像引入了grid.css后，一格宽度和图片到宽度不一致，导致图片展示不全
来源：2-4 自由编程
z慌慌
2020-08-21 18:25:49
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<meta name="viewport" content="device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel='stylesheet' href='./css/grid.css' type='text/css'>
<script src='' type='text/javascript'></script>
<style lang="">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding-top: 100px;
}
.container {
background: #eee;
}
img {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<img src="./img/1.jpg" alt="">
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<img src="./img/2.jpg" alt="">
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<img src="./img/3.jpg" alt="">
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<img src="./img/4.jpg" alt="">
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<img src="./img/5.jpg" alt="">
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<img src="./img/6.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码正确，可以给图片宽度设置成100%，高度自适应就行，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题