html5设置图片自适应屏幕宽度

使用百分比，比如

<

img

src='../a.ipg'

style='width:50%'

/>

这样就会保持屏幕的50%的宽度。

如果有上级标签，比如：

<div>

<

img

src='../a.ipg'

style='width:50%'

/>

</div>

那图片大小就是div宽度的50%，div没有设置宽度就会默认是屏幕宽度，如果设置了宽度，就要注意

利用float+margin实现

.left{width：100pxfloat:left}

.center{float:leftwidth:100%margin-right:-200px}

.right{width:100pxfloat:right}

利用table实现

.parent{width:100%display:tabletable-layout:fixed}

.left,.center,.right{display:table-cell}

.left{width:100px}

.right{width:100px}

利用flex实现

.parent{display:flex}

.left{width:100px}

.center{flex:1}

.right{width:100px}

前言：我们在开发的时候，后台有时候会给我们Html的文本，和图片，但Html一般是电脑端的，放在手机端图片会特别大，所以我们要进行一些适配

先看一下效果

这里因为要用到图片查看器，所以加上以下依赖 ，支持手势双击，单机

以上是借用的这两篇文章

https://blog.csdn.net/smileiam/article/details/72123227

https://www.jb51.net/article/130645.htm

---