图片自适应问题

来源：互联网发布：页面优化编辑：程序博客网时间：2024/06/05 00:11

文章传送门：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
再发一次传送门

0 0