css控制图片自适应大小

图片外层用一个div包裹着

以长边为标准，短边自适应：

  div {display: flex;justify-content: center;align-items: center;width: 定值;height: 定值;}img {width:auto;height:auto;max-width:100%;max-height:100%;}

以短边为标准，长边中间截断：

object-fit： cover

object-fit 控制内容在框中的填充方式
由以下的一个单独关键字来指定

none：保持原有尺寸,不会进行缩放
contain：按比例缩放图片，刚好在容器盒子里完全展示｜
cover：宽高按比例缩放，超出容器的部分居中裁剪
fill：平铺满容器，宽高会被拉伸
scale-down：取none和contain中生成的对象尺寸小的那个

css控制图片自适应大小相关推荐

css自适应图片样式,css怎么让图片自适应？css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式我们马上就能想到,把width.height 设置为100%啊.来看一哈效果. <div cla ...
CSS实现图片自适应布局
CSS实现图片自适应布局最轻松的写法 <div class="container">// 这里图片尺寸为440X440像素,<img src="./i ...
html 中图片自适应大小设置
一.图片自适应大小图片设置固定大小(当然width和height至少大于200px的情况下)个人觉得就很影响响应式布局了,可能会使移动端局部发生错乱,所以图片在一个div中自适应大小,个人还是觉得挺 ...
html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳.那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
css 控制图片的横竖比例
大概你也遇到过"图片高度是宽度50%"这的需求这需求看起来简单, 其实却非常麻烦因为元素的宽高的百分比是相对于父元素的宽高计算的所以直接设 width, height 是不符 ...
html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...

css控制图片自适应大小

css控制图片自适应大小相关推荐

最新文章

热门文章