html5 怎么让图片自适应

Posted 2023-04-11

程序都能自动适应 就是传上图片以后 图片不会自动缩小。用的是v9的程序。

上图是缩小以后图片还是辣么的大。这是程序的事情还是哪里的 求解决。
这个是刚扫二维码出现的情况。

图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。
如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。 参考技术A

【效果】

图片自动伸缩，不会超过屏幕宽度

【原理】

css控制图片的max-width

【代码】

要么直接在图片代码里面设置style，例如<img src="xxx.jpg" style="max-width:100%;"/>

要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class，例如

.response-img 
    max-width: 100%;

本回答被提问者和网友采纳 参考技术B 所有代码，都不要出现width:px 都要写成百分比 ！！！ 参考技术C 后台添加图片的时候规定下宽高

Android 如何让图片自适应WebView大小

在android4.0的版本之前是可以通过webView的一个属性设置图片大小自适应的，但是在4.0之后该属性设置无效，现在解决的办法是通过得到html中的Img标签，然后在html中插入javascript语言，修改img的属性 参考技术A WebSettings ws = tv.getSettings();
//html的图片就会以单列显示就不会变形占了别的位置
ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
//让缩放显示的最小值为起始
webView.setInitialScale(5);
// 设置支持缩放
webSettings.setSupportZoom(true);
// 设置缩放工具的显示
webSettings.setBuiltInZoomControls(true);