图片自适应问题

最新推荐文章于 2024-06-13 19:04:45 发布

带刀预言家

最新推荐文章于 2024-06-13 19:04:45 发布

阅读量903

点赞数

文章标签： html 图片自适应

文章传送门：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

收藏

觉得还不错? 一键收藏
0
评论
图片自适应问题

文章传送门：http://mp.weixin.qq.com/s/OMens6u_ePd0oDSQh-tnLA 主要是讨论如何使图片根据屏幕大小进行自适应。下面是我的一些实践： HTML代码如下<body> <h4>图片自适应</h4> <img src="C:\Users\chen\Pictures\实训\捕获4.PNG" alt="img"></body>此时没有设置任何
复制链接

扫一扫