css 图片缩放不变形

时间:2022-01-25 18:38:50

在写前端页面的时候 刚开始我们写静态页面的时候会将图片宽高固定,找比例相同的图片放上去来保证图片不变形 ,可是在真正的项目中 会碰到一个问题 就是图片是动态上传的 不可能所有的图片都能正常显示 可能会出现变形

如果用的不是img标签 对于图片可以用background 里面有一个属性是background-size:cover;然后将标签设置固定高宽,这样超过容器大小的图片就不会出现变形,但是可能会出现图片展示不完整的情况。(至少图片不会变形)

如果使用的是img标签的话 有点麻烦 我试了网上说的用max-width:100%;height:auto;min-width:100%;图片倒是不会变形 但是如果是不同大小图片最后展示在页面上的大小也是不一样的,反正就是没有做到固定高宽,然后 用了一种 至少看起来会好一点 就是固定高度 宽度虽然不一样但是出来的效果看起来比较整齐,比较实用。height:固定值;max-width :100%

还有一种是width:固定 ,height:0,然后用padding-bottom去顶(值为你想要图片高度),这个方法也可以用 效果和background差不多 出来的图片可能不完整 ,但是上次我使用的时候效果没出来 我也不知道原因是什么。。。

希望有大神能发现一种方法 既能保证图片完整性又能保证图片整齐性

 4月3号新增如下;打算从前端基础开始巩固 然后在别的文章那里看到了 这个就截了图;这个是background-size的几个属性;可能以前没有注意过,要好好学习 打好基础;css还是很强大很好用的css 图片缩放不变形

 

css 图片缩放不变形