object-fit : CSS 图片自适应

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

HTML代码

<div class="nav-banner"><img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner2"><img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner3"><img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner4"><img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner5"><img src="../image/banner1.png" alt="">
</div>

style样式：

  /* object-fit:fill; 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。 */.nav-banner img{width: 100%;height: 100%;object-fit:fill;}/*object-fit: contain  中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。 */.nav-banner2 img{width: 100%;height: 100%;object-fit:contain;}/* object-fit: cover;  中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。 */.nav-banner3 img{width: 100%;height: 100%;object-fit:cover;}/* object-fit:none; 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。 */.nav-banner4 img{width: 100%;height: 100%;object-fit:none;}/* object-fit:scale-down;中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。 */.nav-banner5 img{width: 100%;height: 100%;object-fit:scale-down;}

效果展示：

object-fit : CSS 图片自适应相关推荐

css自适应图片样式,css怎么让图片自适应？css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
html图片自动在div里放大,css图片自适应div大小怎么做
css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性.不管是pc端还是移动端,或者是自适应网站,使用max-wid ...
CSS图片自适应框架
CSS图片自适应框架使用img来设置 <!DOCTYPE html> <html><style>body{margin: 0;padding: 10px;}#a_ ...
css图片自适应有缝隙，有间隙，解决办法
问题: 图片自适应有缝隙,有间隙 css如下: .banner {position: relative;width: 100%;min-height: 150px;overflow: hidden; ...
css图片自适应object-fit
当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图. img有个属性object-fit 属性值:object-fit: ...
CSS——图片自适应宽高
宽度拉伸:把width设置成100%,height设置auto 高度拉伸:把height设置成100%,width设置auto <!DOCTYPE html> <html lan ...
css 图片大小自适应div,CSS 图片自适应显示宽度
这个使用尤其中手机屏幕上最有用. 有喜欢方法: function ReImgSize(){ for (j=0;j { document.images[j].width=(document.images ...
css 图片自适应_104道 CSS 面试题，助你查漏补缺（下）
(给前端大全加星标,提升前端技能) 作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/ma ...
css 图片自适应_img图片自适应object-fit
当图片比例不固定,需要自适应显示图片时,可以使用img属性:object-fit object-fit有如下属性值: object-fit: fill; object-fit: contain; ob ...

object-fit : CSS 图片自适应

object-fit : CSS 图片自适应

object-fit : CSS 图片自适应相关推荐

最新文章

热门文章