img固定宽高，怎么解决不同尺寸图片显示会变形的问题

最新推荐文章于 2025-07-01 18:33:43 发布
原创 最新推荐文章于 2025-07-01 18:33:43 发布 · 2.4w 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#img变形

本文介绍了两种让图片在不同尺寸盒子内自适应显示的方法：一是通过CSS定位和溢出隐藏等属性实现；二是利用object-fit属性，确保图片既不超出容器也不变形。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、根据图片实际宽高和需要显示的容器宽高等比例拉伸或缩小

父容器如div设置固定width和height，设置 overflow: hidden，设置相对定位;img设置绝对定位，设置最大宽度max-width:100%，left、top、right、bottom值为0，设置margin:auto。这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中，看起来又不会显得图片变形。


二、使用object-fit属性

参考：半深入理解CSS3 object-position/object-fit属性

http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/








已知盒子宽高,盒子中图片宽高自适应盒子,不失真不变形
小柠檬爱编程
09-04 901
html: <div class="imgs_top"> <img :src="img" class="imgs" /> </div> css: .imgs_top { width: 800px; height: 500px; display: flex; justify-content: center; align-content: center; .imgs { width: auto; h
html不同屏幕变形,css完美解决方框内不同尺寸多图片变形方法
weixin_36462094的博客
07-07 1056
在css排版多图或列表缩略图时，由于不同图片尺寸宽度和高度比例不一样，经常会导致多个图片变形，所以不能用css固定图片的宽度和高度。先看人固定宽度或高度出现的问题。下面提供两种方法解决1.让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中枯div{width:200px;height:200px;overflow:hidden;border:2pxsolidred;p...
如何解决 img 图片变形
qq50347110的博客
11-26 3669
1. 盒子设置和图片等比例大小 2.使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width ...
＜img＞ 标签最强攻略：性能、SEO、可访问性一篇全懂
最新发布
奇舞周刊
07-01 102
奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。当浏览器请求图片时，服务器返回的是图片的二进制数据（binary data） 并且这些二进制数据可能是各种格式，比如JPEG、PNG、WebP 等。，因为不会阻塞主线程，提升页面响应，提升渲染流畅度。解码是浏览器原生支持的，不同浏览器使用不同的图片解码引擎，现代浏览器都是支持多种图片格式的解码。
img固定宽高，图片等比缩小不变形
m0_56232239的博客
08-30 4935
scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸宽度和高度至少有一个和容器一致。fill: 默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。object-fit属性值？...
img图片太大设置图片宽高，图片显示变形解决办法
m0_52761651的博客
11-01 4434
当img图片太大时，设置图片宽高图片显示就会变形，object-fit属性的使用解决图片变形问题
前端图片变形解决
subsistent的博客
08-26 1015
在引入图片的时候，
image标签图片变形
qq_37194189的博客
10-16 571
官方提供了自己的方法，只需要给image标签添加mode属性即可，在对应上对应的参数即可完美解决。
关于Img标签在固定宽高的容器内部以图片比例缩放存在
徐同泽的博客
11-12 4110
关于Img标签在固定宽高的容器内部以图片比例缩放存在 写这篇文章对自己的想法做一些总结等 起因: 下载一些素材的时候看到排版方式是（下图）的样子，而且图片基本上都是没有变形，扭曲 就产生了"兴趣",看了看源码 又自己想了几种方式方法; 这个源代码采用JS遍历的方式对每一个图片进行布局 而我打算采用  CSS进行图片的样式布局（暂时只想到了三种方式） （1）父级相对定位，子级 绝对定位 设...
外部一个div固定宽高，内部img也固定宽高，怎么让img在外部div中垂直居中对齐
sunny327的专栏
07-24 2958
html代码如下：   css样式如下： （）
解决设置图片宽高后，图片畸变的问题
Amy_ly的博客
02-26 1102
也就是说，可以完整地将图片显示出来。裁剪 bottom right 不缩放图片，只显示图片的右下边区域。裁剪 bottom left 不缩放图片，只显示图片的左下边区域。裁剪 top right 不缩放图片，只显示图片的右上边区域。裁剪 top left 不缩放图片，只显示图片的左上边区域。裁剪 bottom 不缩放图片，只显示图片的底部区域。裁剪 right 不缩放图片，只显示图片的右边区域。裁剪 left 不缩放图片，只显示图片的左边区域。裁剪 top 不缩放图片，只显示图片的顶部区域。
固定宽高容器中显示图片并保持图片的原有比例
一条咸鱼的blog
08-18 695
【代码】固定宽高容器中显示图片并保持图片的原有比例。
html中的img显示固定大小并居中
kangluon的博客
04-08 1323
replaceImg.js export function replaceImg ({str, width=200, height=300}) { str = str.replace(/(<img[^>]*>)|(<img[^>]*><\/img>)/g, function(match, capture){ ...
如何在显示图片缩略图时不挤压拉伸图片
热门推荐
RainSorrow的博客
03-07 1万+
前言：我们在前端显示图片缩略图的时候，会遇到不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。 方案一 max-width和max-height 使用max-width和max-height来做，这种情况下不能保证每一张图片预览都是相同宽高的，但是却不会挤压拉伸图片。 如下图，二、三张图片的宽...
CSS限定图片宽高在范围内等比缩放（img缺省宽高属性）
weixin_40269516的博客
10-30 6128
在标准浏览器中，我们可以通过 img{ max-width:400px; max-height:200px; } CSS样式控制图片，限定img图片在指定范围内等比缩放。该功能实现的前提是最终显示的img标签必须缺省 宽度 或 高度 属性（img图片没有宽高属性）。   img{ max-width: 400px; max-height:200px; }失效的原因：
图片随着屏幕大小变化而变化
qq_42379512的博客
10-16 2278
1、img标签设置了width和height时，缩放浏览器显示比例时，不会改变图片大小，但是改变屏幕大小则会改变图片大小； 2、img的父标签div设置width和height，但img没有设置，则图片大小会随着浏览器缩放而改变，但是改变屏幕大小则不会改变图片大小； 设置图片大小随着屏幕大小变化而改变，参考：https://blog.youkuaiyun.com/markximo/article/deta...
image按比例缩放(img容器比例固定，但是图片和容器比例不同)
weixin_34236869的博客
08-17 1071
1.作为background-image <div class="zoomImage" style="background-image:url(images/test1.jpg)"></div> .zoomImage{ 　　width:100%; 　　height:0; 　　padding-bottom:100%; 　　overflow:hidden; ...
在img标签限制图片大小
weixin_35756892的博客
01-04 6675
要限制图片大小，你可以使用 HTML 的 img 标签的 width 和 height 属性。例如： <imgsrc="image.jpg" width="500" height="600"> 这样，图片的宽度就会被限制在 500 像素，高度被限制在 600 像素。 注意，如果你只设置了一个属性(例如只设置了 width)，图片的比例可能会改变。为了保持图片的原有比例，你应该同时设置...
移动端图片自适应，img固定宽高，怎么解决不同尺寸图片显示会变形的问题
imkaifan的博客
04-14 5038
移动端图片自适应，img固定宽高，怎么解决不同尺寸图片显示会变形的问题
JavaScript解决网页图片拉伸问题：动态调整图片尺寸
然后，根据图片的宽高比和容器的大小，动态调整图片的width或height属性，确保图片在容器内显示得既美观又不失真。 总结起来，使用JavaScript解决网页图片拉伸问题的关键在于：利用HTML5的现代特性获取图片真实尺寸...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值