css > 解决图片在手机端发虚，背景图片 缩放

最新推荐文章于 2026-07-10 10:43:44 发布
原创 最新推荐文章于 2026-07-10 10:43:44 发布 · 1.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
html + css

当前文章被收录于：

html + css
20 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一种解决手机端图片发虚的问题的方法，通过缩小<IMG>图片及背景图片来提升显示效果。提供了具体的CSS代码示例。

 

解决图片在手机端发虚，可以将<IMG>图片，或者背景图片 做缩小处理 

 

其中背景图片缩小处理 参考下面

background:url("../images/xxxx.png") no-repeat center center  #efefef;

background-size: 15px 15px;

 

 

【前端之路】通过css让移动端与pc端自适应
29的博客
04-11 5300
跨平台移动WEB技术 一、目的 1、了解什么是响应式WEB设计 2、掌握CSS3媒体查询的使用 3、熟悉什么是栅格系统 4、掌握弹性盒布局 5、掌握汉堡菜单的制作 二、制作一个页面： 1、PC端为国字型布局，移动端为上下布局 2、必须有导航（不少于4个），移动端将导航收起，变为汉堡菜单。 3、页面中的文字和图片能够自适应设备大小 ...
自定义载板RK3588HDMI输入配置完整解决方案
梁俊星的博客
05-30 1218
✅ HDMI输入信号检测✅ 自动时序识别（支持1080p@60Hz等标准格式）✅ V4L2视频设备接口✅ 实时视频流捕获✅ H.264编码录制✅ HDCP内容保护支持问题根因识别：发现了hdmim1模块资源冲突的本质问题硬件设计理解：明确了Orange Pi 5 Plus的真实硬件设计意图功能实现：成功启用HDMI输入功能，替代了无法使用的HDMI1输出完整验证：建立了从硬件检测到视频录制的完整测试流程。
js实现手机端图片双指缩放变大变小插件
热门推荐
YaWen的博客
02-20 3万+
对于手机上图片的缩放通常有两种： 一种是屏幕上有一张图片，直接双指缩放，如下图： 还有一种是类似于手机相册一样，一张一张的，点击单张之后，全屏打开，在进行缩放操作，如下图： 接下来，介绍第一种情况的插件，pinchzoom.js，用法很简单，只需要修改img的路径，在引用pinchzoom.js以及你平时用的jquery就可以。 pinchzoom.js下载链接贴上完整的代码：<!D
CodeQL查询时遇到报错：A fatal error occurred: Could not process query metadata for...如何解决？
**My Coding Family**
10-19 1061
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！
css——手机端图片正确显示
weixin_33887443的博客
12-01 589
这两天遇到的问题汇总（一）： 1.图片在app端显示有差异：如下                        左边图片是：图片显示太大，以至于让整个页面都失真的效果；右边是调好样式之后的效果，知道增加了一个什么属性不？ ... &lt;div class="starter-template"&gt; &lt;h1&gt;{{data.title}}&lt;/h1...
Windows 10系统故障排查：黑屏重启与0xc000009c内存报错修复指南
最新发布
weixin_33698823的博客
07-10 656
Windows系统文件损坏是常见的操作系统故障，其原理在于关键系统组件因异常关机、驱动冲突或硬件问题导致完整性破坏。通过系统文件检查器（SFC）和部署映像服务与管理工具（DISM）等内置工具，可实现对系统核心文件的验证与修复，这对于维持系统稳定性具有重要技术价值。这类技术广泛应用于解决开机黑屏、资源管理器闪退等典型场景，例如当遇到0xc000009c内存报错或DISM修复卡顿问题时，系统性的排查方法能有效定位文件损坏层级。掌握从基础硬件检测到高级注册表修复的完整流程，是处理Windows 10复杂故障组合的
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
Cien
06-09 3179
sprite背景图优化，通过设置css3 background-size来压缩大图达到高清效果，来解决H5网页在手机浏览器下图标模糊的问题。
css背景图铺满后图片变模糊的解决办法
qq_40649432的博客
04-22 3076
直接上代码 background-image: url('@/assets/xk.png'); width:70px; height: 25px; background-size:100% 100%;//宽度铺满 image-rendering: -webkit-optimize-contrast;//处理模糊的代码
css解决图片失真问题
yzxzxf的博客
03-09 3364
1.背景图片失真 .con{ height:100vh; width:100vm; background: url(../../assets/login/background.png) 100% 100%; background-color: #2d3a4b; background-size: 100vm 100vh; image-rendering: -webkit-optimize-contrast; } 2.图片失真 img {
设置背景图片模糊，内容不模糊
lj1530562965的博客
09-18 3132
设置背景图片模糊，内容不模糊 需求：一个div设置了background-image，现在需要使背景模糊，div内的文字清晰显示。 解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .conten
移动端图片模糊问题的解决办法
perry
12-25 7456
最近在优化移动端的时候，发现好多图片、背景图都很模糊，在pc端没有问题，但是在移动端，就会出现很模糊的现象 解决办法：图片不要用1：1比例的图，用2X的图，这样的话看起来就很清晰了。
【移动端布局】让图片保持等比例缩放 （实用）
暖一杯茶的博客
08-01 4928
摘要： 前端写页面布局时,图片变形是个很令人头疼的问题,手机屏幕分辨率不一样,出来的效果就不一样,下面的代码可以解决这些问题,保持图片在不同分辨率下面也可以让图片不变形 首先不能给外层列表定高度,用margin或者padding撑开.album-li-pic{height:0;overflow:hidden;margin:0;padding-bottom:100%;} img用定位的方式布局,w...
手机端用背景图片变模糊
vcxiaohan的博客
03-18 1702
不用在手机端用背景图片，会模糊，直接用img标签
css 背景图不拉伸自适应屏幕大小
weixin_33726313的博客
12-08 7705
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端-图片及背景图的缩放
weixin_34391445的博客
05-15 685
做了一组移动端的页面，在布局时遇到了一些问题，总结下以避免再次掉坑。遇到的问题：1.图片及带背景图片的块宽高等比缩放布局2.margin,padding百分比布局图片及带有背景图片的块的图片宽高等比缩放纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。带背景图片的div就有点麻烦了，宽度可以使用百分比，但高度如果不设置具体像素数，会按照内容...
图片大小自适应、pc端、手机端
林中明月间丶
01-12 2万+
写页面的时候经常会遇到需要图片自适应容器大小这样的情况： <style> div{width:400px;height:400px;border:1px solid #000; } img{width:100%;height:100%;} </style> 不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小...
手机网页web app 为何你的图片不清晰 模糊?
点一根烟 浪迹天涯
06-22 3970
为什么？很简单啦。因为像素算法
html5开发之viewport使用
weixin_34378767的博客
08-30 1288
2019独角兽企业重金招聘Python工程师标准>>> ...
css 一直图片适配所有手机背景图
夜惊如水
06-19 2065
background:url("../../image/a.png") #fff 0% 0% / contain no-repeat; background-position:center; 只适合白色背景
MATLAB/Simulink的UPFC仿真模型
基于MATLAB/Simulink的统一潮流控制器（UPFC）仿真模型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值