css实现图片的等比缩放
在实际开发过程中, 总是会遇到各种需要处理图片的情况,举个简单的例子, 用户上传头像,我们都知道头像宽高是有一定比例的, 但用户的图片千奇百怪,如果简单的按照我们设定的宽高显示,图片变形不可避免,那么该怎么处理?
方法一:object-fit
object-fit属性你了解多少呢?下面听我详细介绍下。
object-fit属性详解
根据MDN(object-fit)的介绍,object-fit
CSS属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
也就是说盒子固定宽高,图片在这个盒子里面会如何适应。
属性值:
objext-fit:fill | contain | cover | none | scale-down
contain
被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
可以看到上面图片中左右两边的就是所谓的黑边, 因为它的宽高比与框的不一致。
cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。
也就是说, 在宽高比不一致时,cover属性值会进行裁剪,以此来适应容器。
就像这样:
fill
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。
fill属性与cover属性值类似,都会完全填充内容框, 不同的是「fill属性值会拉伸元素来适应容器」
如下图, 高度被拉伸:
none
被替换的内容将保持其原有的尺寸。
scale-down
内容的尺寸与none
或contain
中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
大概就是取决于none和contain的最小值, 这个属性不怎么用到。
实例代码演示
HTML
<div class='header-container'> <img src="./test.jpg" alt=""> </div> <img src="./test.jpg" alt="" style='height: 100px;'>
CSS
.header-container{ width: 100px; height: 100px; border: 1px solid #333; border-radius: 50%; overflow: hidden; } .header-container img{ width: 100%; height: 100%; }
此时效果如下
不难看出, 上面的头像对比下面的原图,高度被拉伸了, 那么此时只需要给img
添加一个属性object-fit: cover;
效果如下:
方法2:max-width和max-height
我们可以设置max-width
和max-height
来限制图片的最大值,一般是设置为外层容器的100%
;这样图片就会等比缩放,且不会变形。
结语
以上就是今天码云笔记为大家整理的css实现图片的等比缩放的全部内容,小小技巧,为大家提供参考,希望对大家有帮助。
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css实现图片的等比缩放