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

最新推荐文章于 2024-05-15 09:36:56 发布
最新推荐文章于 2024-05-15 09:36:56 发布
阅读量2.4w 收藏 10
点赞数 2
分类专栏： 前端开发 文章标签： img变形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16660859/article/details/80521146
版权

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

父容器如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/








洺鱼
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
已知盒子宽高,盒子中图片宽高自适应盒子,不失真不变形
小柠檬爱编程
09-04 808
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 929
在css排版多图或列表缩略图时，由于不同图片尺寸宽度和高度比例不一样，经常会导致多个图片变形，所以不能用css固定图片的宽度和高度。先看人固定宽度或高度出现的问题。下面提供两种方法解决1.让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中枯div{width:200px;height:200px;overflow:hidden;border:2pxsolidred;p...
css设置img图片保持宽高比
Sunny_lxm的博客
04-10 632
css设置img图片保持宽高比 aspect-ratio
css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应
最新发布
2401_84715691的博客
05-15 742
这种图片比容器小的情况强行将图片自适应的话图片就失真。但经常会遇到接口获取的不规则图片的情况，一般这种时候会将小于容器的话将其水平、垂直居中。属性就能进一步优化图片的宽高都小于容器的情况了。max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。这是正常的佩琪（如果图片比容器大的话，图片会超出容器）
img固定宽高，图片等比缩小不变形
m0_56232239的博客
08-30 4043
scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸宽度和高度至少有一个和容器一致。fill: 默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。object-fit属性值？...
关于Img标签在固定宽高的容器内部以图片比例缩放存在
徐同泽的博客
11-12 4002
关于Img标签在固定宽高的容器内部以图片比例缩放存在 写这篇文章对自己的想法做一些总结等 起因: 下载一些素材的时候看到排版方式是（下图）的样子，而且图片基本上都是没有变形，扭曲 就产生了"兴趣",看了看源码 又自己想了几种方式方法; 这个源代码采用JS遍历的方式对每一个图片进行布局 而我打算采用  CSS进行图片的样式布局（暂时只想到了三种方式） （1）父级相对定位，子级 绝对定位 设...
外部一个div固定宽高，内部img也固定宽高，怎么让img在外部div中垂直居中对齐
sunny327的专栏
07-24 2905
html代码如下：   css样式如下： （）
div或img图片高度随宽度自适应的方法
12-28
二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） 行内元素垂直居中 <div class=img-box>
vue 检测用户上传图片宽高的方法
10-15
总结起来，Vue.js中检测用户上传图片宽高的方法主要是通过监听图片加载事件，然后获取`naturalWidth`和`naturalHeight`属性。在用户提交之前，可以通过比较这些值与预设的标准来判断图片是否满足尺寸要求。这样可以...
CSS完美解决前端图片变形问题的方法
11-21
在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下： 一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中： <style type="text/css"> div{ width: 200px; height:...
解决Vue打包后访问图片/图标不显示的问题
10-16
在开发Vue应用的过程中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，在线上环境运行时，图片和图标的资源无法正常显示。这个问题主要是由于打包过程中的路径问题导致的。以下将详细介绍如何解决...
jquery在Chrome下获取图片的长宽问题解决
10-27
为了解决这个问题，我们可以利用jQuery的`$(window).load()`事件，这个事件会在整个页面（包括所有图片）完全加载后触发。这样可以确保在获取图片尺寸时，图片已经加载完成： ```javascript $(window).load...
html中的img显示固定大小并居中
kangluon的博客
04-08 1238
replaceImg.js export function replaceImg ({str, width=200, height=300}) { str = str.replace(/(<img[^>]*>)|(<img[^>]*><\/img>)/g, function(match, capture){ ...
image按比例缩放(img容器比例固定，但是图片和容器比例不同)
weixin_34236869的博客
08-17 1001
1.作为background-image <div class="zoomImage" style="background-image:url(images/test1.jpg)"></div> .zoomImage{ 　　width:100%; 　　height:0; 　　padding-bottom:100%; 　　overflow:hidden; ...
控制图片固定大小不失真的几种方法
qq_36389107的博客
02-02 3203
1.固定宽度或高度 这是一种比较常见的方法都烂大街了，先直接上代码吧。 style> .box-content{ width:96%; margin:2%; display: flex; flex-wrap: wrap; } .box{ width:23%; margin:1%; } .box img{ width:100%; } s
确保img的宽高比固定
weixin_30342209的博客
12-05 1282
html: <div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/...
在img标签限制图片大小
weixin_35756892的博客
01-04 5414
要限制图片大小，你可以使用 HTML 的 img 标签的 width 和 height 属性。例如： <imgsrc="image.jpg" width="500" height="600"> 这样，图片的宽度就会被限制在 500 像素，高度被限制在 600 像素。 注意，如果你只设置了一个属性(例如只设置了 width)，图片的比例可能会改变。为了保持图片的原有比例，你应该同时设置...
img标签的大小自适应
qq_44035882的博客
11-21 2305
转载 ： https://blog.csdn.net/qq_44423029/article/details/125257732。 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。保留原有元素内容的长度和宽度，也就是说内容不会被重置。不保证保持原有的比例，内容拉伸填充整个内容容器。但部分内容可能被剪切。object-fit属性。
img和背景图处理图片不拉伸_img固定宽度和高度，不规则图片变形问题的解决方法
06-07
要使img标签固定宽度和高度，同时又不让不规则图片变形，可以使用以下两种方法： 1. 使用CSS的object-fit属性 object-fit属性可以用来控制图片在容器中的适应方式，常用的取值有cover、contain、fill、none等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值