html中如何等比缩小图片,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

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实现图片的等比缩放的全部内容，小小技巧，为大家提供参考，希望对大家有帮助。

html中如何等比缩小图片,css实现图片的等比缩放相关推荐

html设置复选框图片,css实现图片右上角添加复选框的方法
css实现图片右上角添加复选框的方法发布时间:2020-06-15 10:59:23 来源:亿速云阅读:221 作者:Leah 这篇文章给大家分享的是css实现图片右上角添加复选框的方法,相信大部 ...
html如何通过路径查找图片,css添加图片怎样找图片路径？
css添加图片怎样找图片路径? 在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到. 现在来看两个文件目录:/css/admin/main.css ...
css中图片缩小代码,css让图片等比例缩小的代码
随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢? 那就利用css的强大 ...
html中如何等比缩小图片,css如何将图片等比缩放
css将图片等比缩放的方法:可以利用object-fit属性来实现,如[object-fit: cover;].object-fit属性指定元素的内容应该如何去适应指定容器的高度和宽度. 属性介绍: ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳.那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV ...
django中html中图片路径怎么写,django css样式,图片路径问题解决方案
在用Django 做项目时,如果在本地调试的情况下,我们会开启 settings.py 中的 DEBUG = True 同时我们还会做如下操作: 1. 设置 STATIC_ROOT = os.path ...

html中如何等比缩小图片,css实现图片的等比缩放

html中如何等比缩小图片,css实现图片的等比缩放相关推荐

最新文章

热门文章