文章传送门:http://mp.weixin.qq.com/s/OMens6u_ePd0oDSQh-tnLA
主要是讨论如何使图片根据屏幕大小进行自适应。
下面是我的一些实践:
HTML代码如下
<body>
<h4>图片自适应</h4>
<img src="C:\Users\chen\Pictures\实训\捕获4.PNG" alt="img">
</body>
此时没有设置任何的css样式,效果如下
可以看到若没有任何样式,屏幕小将会遮盖图片,图片显示不完全。显然,此时的图片大小与他本身大小一样。
上图验证了这个结论。
width=100%?
若设置width=100%呢?是否有用?
<style>
.image-example {
width: 100%;
}
</style>
看下效果
效果还不错欸!
但是!!!你会发现若width=100%的话,图片的大小将跟屏幕大小一样。
导致的结果就是,小图片被放大将像素失真。
很明显,上图明明很小,但是由于自适应,被拉伸了。
如何拉伸到一定宽度后不再拉伸?
文章里面思路很清晰,为达到这个目的,可以包裹一层父元素,父元素的宽度根据内容来定。
于是想到了行内元素。
因此,只要图片外面有一层display为inline-block的父元素即可。
HTML
<body>
<h4>图片自适应</h4>
<img src="C:\Users\chen\Pictures\实训\捕获12.PNG" alt="img" class="image-example">
<div class="image-wraper">
<img src="C:\Users\chen\Pictures\实训\捕获12.PNG" alt="img" class="image-example">
</div>
</body>
CSS
<style>
.image-wraper {
display: inline-block;
}
.image-example {
width: 100%;
}
</style>
效果(上面是没有父元素的,下面有)
文章传送门:http://mp.weixin.qq.com/s/OMens6u_ePd0oDSQh-tnLA
再发一次传送门