- A+
所属分类：网站建设
打开css文件夹中的hello的css文件，在里面设置.scale img的属性background-size与width。
.scale img{
background-size:contain|cover;
width:100%;
height: auto;
}
方法二
元素宽度也是随内容变化的，而且图片默认样式恰巧也表现为inline-block的效果，是否可以从这里下手呢？
|
1
2
3
4
5
6
7
8
9
|
<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""></div><div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""></div><div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""></div> |
结构再一次变成只有一层嵌套，然而css样式却需要调整一下：
|
1
|
.img-wrap {display: inline-block;} |
最后，奉送上完整的css代码：
|
1
2
3
4
5
6
7
|
.img-wrap { display: inline-block;}.img-wrap img { width: 100%; vertical-align: middle;} |
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
