CSS处理图片渲染时拉伸和挤压变形

CSS解决图片渲染时拉伸和挤压变形的方法

背景：商品循环出来需要在固定大小里面，但是商品图片大小商家上传时没有规定图片比例，如果写死图片大小会导致图片渲染是拉伸和挤压变形
思路：给图片一个父级容器，父容器给定固定大小，图片限定最大宽度与最小宽度不超过父容器
如：

 <style type="text/css">.bigBox{display: flex;}.imgBox{width:200px;height:200px;margin-right: 10px;background-color: pink;}.imgBox>img{max-width:100%;max-height: 100%;}</style><body><div class="bigBox"><div class="imgBox"><img src="img/1.jpg" alt=""></div><div class="imgBox"><img src="img/2.jpg" alt=""></div><div class="imgBox"><img src="img/3.jpg" alt=""></div><div class="imgBox"><img src="img/4.jpg" alt=""></div><div class="imgBox"><img src="img/apple.jpg" alt=""></div></div></body>

但是图片比例不同会导致留白不同，很不美观逼死强迫症。

然后为了让他更美观，想了一下，决定让图片在父容器中居中显示。
代码如下：

<style type="text/css">.bigBox{display: flex;}.imgBox{display: flex;justify-content: center;align-items: center;width:200px;height:200px;margin-right: 10px;background-color: pink;}.imgBox>img{max-width:100%;max-height: 100%;}</style><body><div class="bigBox"><div class="imgBox"><img src="img/1.jpg" alt=""></div><div class="imgBox"><img src="img/2.jpg" alt=""></div><div class="imgBox"><img src="img/3.jpg" alt=""></div><div class="imgBox"><img src="img/4.jpg" alt=""></div><div class="imgBox"><img src="img/apple.jpg" alt=""></div></div></body>

这样是不是就好很多了呢。
总结：处理图片渲染是拉伸和挤压变形的主要代码就是给图片一个定死宽高的父容器，把父容器变为弹性盒子，让图片在父容器下居中，最大宽度与高度不超过父容器。
新方法：

<style>
.bigBox{display: flex;
}
.imgBox{width:200px;height:200px;margin-right: 10px;background-color: pink;
}
.imgBox>img{width:100%;height: 100%;object-fit:contain;
}
</style>

新方法比之前的方法更简单。

CSS处理图片渲染时拉伸和挤压变形相关推荐

小程序进入页面图片渲染会拉伸闪下变形优化bug
小程序进入页面图片渲染会拉伸闪下变形优化bug image的mode图片剪裁缩放模式用mode='widthFix'(宽度不变,高度自动变化,保持原图宽高比不变),记得要在css里也加上height: ...
css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
threejs加载模型挤压变形_车用水阀套零件冷挤压成形数值模拟试验研究
冷挤压成形是一种常见的材料塑性成形工艺,它具有成形零件力学性能高.精度等级高.表面粗糙度较低.生产周期短.节约资源.节能环保等诸多工艺优点,在许多工程领域得到广泛应用,尤其是在汽车工业中.水阀套零件是 ...
css处理图片上的文字(内阴影)
css处理图片上的文字(内阴影) 做项目过程中,我们可能会遇到这样的一个组件,该组件的图像上方是文本. 在某些情况下,根据所使用的图像,文字难以阅读,如文字是白色的,背景图偏浅. 这种情况有一些不同的 ...
如何提高CSS网页渲染效率
如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多,而这些细节之处也是影响CSS的网页渲染效率的重要因素,黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法,一起来学习一下. 1. ...
vue-quill-editor编辑器编辑之后的内容，在页面渲染时，没有居中、缩进、加粗、斜体等相关样式
vue-quill-editor编辑器编辑之后的内容,在页面渲染时,没有居中.缩进.加粗.斜体等相关样式:样式丢失问题 /* 富文本对齐方式 */.ql-align-center{text-align ...
php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
页面引用CSS和Javascript时，内联和外置的区别
CSS在实际应用中,一般有以下三种级联方式. 1. 外联式外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式.在 HTML 中的外部级联采用 <link& ...
CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

CSS处理图片渲染时拉伸和挤压变形

CSS解决图片渲染时拉伸和挤压变形的方法

CSS处理图片渲染时拉伸和挤压变形相关推荐

最新文章

热门文章