图片高度问题
来源：3-2 实现栅格系统--扩展部分
花生香又脆
2020-02-25 21:10:05
老师你好，我是自己找的图片，图片本身的高度是不一致的，引入的grid.css文件中的padding我删除掉了。
把图片高度设置成100%的时候，布局会乱掉，如下图，是什么原因？
把高度设置成一样，布局不乱了，但是小屏的时候，如下图，图片会被拉伸，该怎么解决？
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
<title>响应式布局</title>
<link rel="stylesheet" href="grid-layout.css">
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
img{ margin: 0; padding: 0; }
html{ font-size: 20px; }
html,body{ width: 100%; }
div{ font-size: 0; }
.container{ background-color: pink; padding: 0; padding: 0 15px; }
img{ width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="img/cat1.jpeg">
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="img/cat2.jpg">
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="img/cat3.jpg">
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="img/cat4.jpg">
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="img/cat5.jpg">
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<img src="img/cat6.jpg">
</div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕糖
2020-02-26
同学你好，图片的宽高改变其中一个，另一个是会随着改变的，所以改变高度的时候，宽度也会发生变化。
若想充满盒子，可以设置宽高都是100%，不过由于图片时同学自己找的，可能跟实现的效果不太符合，所以会发生变形。不过同学不用担心，在开发的过程中，这些图片的尺寸都是根据效果设计好的。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题