当UI给的图片过大，应该如何处理

最新推荐文章于 2025-07-04 15:56:49 发布
原创 最新推荐文章于 2025-07-04 15:56:49 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何处理比正常尺寸大的UI设计图，特别是在苹果设备上，其像素密度为普通电脑的两倍。文章提供了使用CSS来适配不同尺寸图片的方法，如通过设置背景大小属性实现图片的正确显示。

UI一般设计图的图片会比正常的尺寸大，苹果的分辨率比正常的电脑大2倍的像素。当拿到设计图以后所有用ps量的尺寸（宽高）需要除2

当图片过大，我们应该怎么处理：外层div设置固定尺寸。如果用过大的图片当成背景。只要给元素设置background-size:100%或者background-size:cover即可。

Stable Diffusion WebUI 附加功能/图片放大（Extras）：单张图片/批量处理/从目录进行批量处理
水滴的博客
04-01 5883
大家好，我是水滴~~篇文章主要讲解 Stable Diffusion WebUI 的附加功能/图片放大（Extras）的使用，主要包括：单张图片、批量处理、从目录进行批量处理。文章中包含大量的图片和示例，非常适合新手同学，希望对你有所帮助！
UI自动化之图片验证码处理
Python_987的博客
07-04 1550
本文主要使用的库包括：ddddocr（带带弟弟OCR），PIL（图像处理），Selenium（UI自动化） 环境要求：python3.8以上
JavaScript前端实现压缩图片功能
11-21
为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。 压缩效果 首先介绍下压缩的大概流程 通过原生的input标签拿到要上传的图片文件 将图片文件转化成img元素标签 在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件 最后将该blob文件传到服务端 完成！
解决UIImage在压缩时失真问题，压缩图片的大小
天方夜歌的博客
07-12 2078
这个问题解决了一大段时间，甚是头痛！  1.（错误的方法）之前以及网上很多资料都是使用这种方法来压缩图片： /** * 压缩图片 * image:将要压缩的图片 size：压缩后的尺寸 */ -(UIImage*) OriginImage:(UIImage *)image scaleToSize:(CGSize)size { UIGraphicsBeginImageCon
为什么前端实现的页面跟设计师的设计稿的差别那么大？
weixin_34112208的博客
03-07 1208
设计师 设计师是最贴近产品体验的人，但是术业有专攻，设计师往往更加注重视觉的感受，而容易犯一些美丽的错误： 1、以原生 APP 的体验类比 H5 页面设计 我们都知道，原生 APP 的体验非常流畅，界面也非常华丽，所以设计师也尽量向原生 APP 的体验靠拢。但是理想很丰满，现实很骨感，许多 APP 的体验换到 H5 上实现就惨不忍睹。所以我建议设计师可以多比照其他 H5 网站的表现来进...
C#里如何让尺寸太大的图片自动缩小？
lijian910wolf的专栏
03-17 2312
我这样写的：     450){this.width=450;}">         它报：编译器错误信息:   CS1026:   应输入   )     问题点数：50、回复次数：11Top 1 楼Meyer（断水）回复于 2004-07-18 16:40:42 得分 1你控制Image的大小就可以了，如果你只控制他的高或者宽     回自动按比例缩小的Top2 楼hnliru
移动端样式 ui图转前端页面（根字体大小设置方法）
juse__we的博客
10-11 4330
参考网站： dpr：https://blog.youkuaiyun.com/a419419/article/details/79295799（DPR = 设备像素 / CSS像素(某一方向上，也可以理解为屏幕大小)） 浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了子元素相关尺寸计算方便，这样写最合适不过了。只要将设计稿中量到的px尺寸除...
UI处理(一键转换图片0-9)
06-02
"一键转换图片0-9"是指通过自动化工具或脚本快速将数字0到9的图片进行统一处理，如调整尺寸、格式转换等，以满足UI设计中的规范和需求。这在批量处理大量数字图像时尤为高效。 描述中的"PS技巧[批量修改图片大小并...
Vue+Element-UI实现上传图片并压缩
12-30
Vue+Element-UI 上传图片并压缩，供大家参考，具体内容如下 1.版本 Vue:2.5.2 Element-UI：2.12.0 可实现图片上传前，自动压缩。 Element-UI组件，详情见 官网。 2.template部分 照片> <el-upload accept=...
UI shader图片效果处理
weixin_42573555的博客
12-28 2042
系列文章目录 图片处理 亮度，饱和度，对比度 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、图片调节二、CG1. 亮度，饱和度，对比度2.效果对比一、边缘检测二、CG1. 亮度，饱和度，对比度总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、图片调节 示例 二、CG 1. 亮度
前端大屏适配几种方案
Liushiliu104的博客
03-06 2万+
前端大屏适配方案
移动WEB开发之流式布局--二倍图
薛定谔的猫
11-16 1857
就是原先用50*50放到移动端会放大，变的模糊，但是如果我们采用100*100然后压缩成50*50，在放到移动端又变成了100*100实际上并没有变化，但是实际没有模糊。Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。物理像素比就是屏幕的分辨率，分辨率越高，显示越清楚，750* 1334就是横的有750的像素点，竖的有1334的像素点。一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。背景图片 注意缩放问题。
记录利用CSS完美解决前端图片变形问题
weixin_30666943的博客
06-06 1646
在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下： 一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中： <style type="text/css"> div{ width: 200px; height: 200px; overflow: hidden; border: 2px solid r...
前端渲染大量图片的首屏加载优化方案
最新发布
前端金牌摸鱼达人
07-04 1688
渲染大量图片时，首屏加载性能至关重要。
UI还原度小技巧之缩放
weixin_45101949的博客
07-05 531
我们经常会遇到UI给的设计图尺寸较大，和我们浏览器相差太大，这时候，按照UI给的尺寸直接写进代码里面的话，可能会让页面结构在我们的浏览器上面显得很大，产生横向滚动条等，明明是按照设计稿的尺寸，怎么做出来感觉和设计稿两模两样。我们可以考虑试试想一下，将设计稿全铺满浏览器的想法，这要求我们设计稿根据我们的浏览器大小而跟随变化。我们主要考虑宽的适配。按照这样的适配方式，那我们做出来的页面就是比较符合设计稿在浏览器的展示效果。只需要在页面外层的元素上添加这个样式，就可以完成缩放啦。
网页适配--解决笔记本DPI为125%时网页被浏览器放大的bug
weixin_65777478的博客
07-03 2716
解决笔记本电脑DPI为125%.浏览器放大问题
CSS3如何调整背景图片大小
热门推荐
CH_Y的博客
10-20 2万+
在CSS3中，如果想要调整背景图片的大小可以通过设置background-size属性进行设置。
超过固定宽度(或行数)显示...(或省略)
weixin_34092455的博客
01-17 654
作为前端经常遇到的一个需求。对于一些比较长的文本做限制，不显示，或者显示省略号。今天特意整理了一下，做个备忘。 1.超出固定长度显示... .class{ width: 400px; overflow: hidden; //这个是设置隐藏的。还有其他的，例如scroll，是超出固定长度，底部显示滚动条的。 ...
实现Unity中鼠标滑过图片局部放大的技巧
在Unity游戏引擎中实现鼠标滑过图片产生局部放大的效果，是一种常见的UI交互设计，常用于模拟电商平台上商品图片查看的细节放大效果，提高了用户的视觉体验和交互感。为了实现这种效果，需要涉及到多个Unity的知识点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值