1行css编码处理照片统1尺寸后的拉伸难题(object

日期:2021-03-17 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店

1、先来个实战演练

1. 检测实例

要求: 规定小表情库里全部小表情包尺寸都固定不动

具体实际效果: 因为照片初始尺寸都不1样,强行设置尺寸值会致使拉伸,假如不设置尺寸则摇缀不齐。比如:

//html
<body>
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    ....
</body>

//css
img{
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

2. 处理方式

大多数数全是运用background-size: cover 来防止对照片导致的缩小或拉伸。

精巧而强劲的object-fit

object-fit好像是被人忽略的1个CSS3特性。由于存在适配性,因此沒有background-size功能强大,可是因为某种状况,你迫不得已用img标识来引进照片,这时候候用object-fit是很好的挑选。

CSS3 background-size出現的较为早,大伙儿应当了解其适用的1些值,除标值以外,其还适用几个重要字,比如:cover, contain等。

object-fit也是相近的,但還是一些差别,实际有5个值:

.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: 汉语释义“包括”。维持原来规格占比。确保更换內容规格1定能够在器皿里边放得下。因而,此主要参数将会会在器皿内留下空白。

cover: 汉语释义“遮盖”。维持原来规格占比。确保更换內容规格1定超过器皿规格,宽度和高宽比最少有1个和器皿1致。因而,此主要参数将会会让更换內容(如照片)一部分地区不能见。

none: 汉语释义“无”。维持原来规格占比。另外维持更换內容初始规格尺寸。

scale-down: 放缩,以融入显示信息地区,当显示信息地区小于照片尺寸时,照片被放缩;当显示信息地区超过照片尺寸时主要表现为照片一切正常的尺寸,实际效果和none1致

大家给上图全部img都统1再加object-fit: cover;特性,看看实际效果:

完善处理!真的很便捷,只必须1行css

大家实际学1下object-fit

特性 叙述 fill 默认设置值。全部目标将彻底填充此框。 假如目标的高度不配对其框的宽高比,那末该目标将被拉伸以融入。 contain 全部目标在填充盒子的另外保存其长宽比,因而假如宽高比与框的宽高比不配对,该目标将被加上“黑边”。 cover 被更换的內容尺寸维持其宽高比,另外填充元素的全部內容框。 假如目标的宽高比与盒子的宽高比不配对,该目标将被裁剪以融入。 none 內容规格不容易被更改。 scale-down 內容的规格就好像特定了none或contain,默认设置运用规格最少的值

大家用1张照片做为事例分析以上上面各个特性:

//html

<div>
    <img src="./public/test.jpg" class="initImg"/> 
    <p>照片原始化</p>
</div>

<div>
    <img src="./public/test.jpg" class="initImg fillImg"/> 
    <p>object-fit:fill</p>
</div>

<div>
    <img src="./public/test.jpg" class="initImg containImg"/> 
    <p>object-fit:contain</p>
</div>
</br>

<div>
    <img src="./public/test.jpg" class="initImg coverImg"/> 
    <p>object-fit:cover</p>
</div>

<div>
    <img src="./public/test.jpg" class="initImg noneImg"/> 
    <p>object-fit:none</p>
</div>

<div>
    <img src="./public/test.jpg" class="initImg scaleDownImg"/> 
    <p>object-fit:scale-down</p>
</div>


//css
body div{
    display: inline-block;
    text-align: center;
}
.initImg{
    width: 150px;
    height: 80px;
}
.fillImg{
    object-fit: fill;
}
.containImg{
    object-fit: contain;
}
.coverImg{
    object-fit: cover;
}
.noneImg{
    object-fit: none;
}
.scaleDownImg{
    object-fit: scale-down;
}

这里略微解释1下:

  1. fill: 默认设置值,和未设定1样。会将照片缩小拉伸
  2. contain: 当宽/高的值做到父器皿要求的最少宽/高时,则对应的另外一个值会依照初始宽高比开展转化成。比如上面,照片的高宽比做到父器皿高宽比后,宽度依照占比转化成,致使上下留白
  3. cover: 和contain不1样,cover是以最大值为要求的。比如上图,照片的高宽比(较小值)最先做到父器皿高宽比后,而宽度仍未做到父器皿的宽度,照片会再次'生长发育',直至宽度做到和父器皿宽度1致。而等比伸缩的高宽比会外溢,外溢一部分剪裁
  4. none: 说白了宽高对照片不起功效,即便设定了固定不动的宽高,照片依然以初始尺寸呈现,可是超过设定的值会被遮挡
  5. scale-down: 以contain或none照片最少规格为规范.

以上便是object-fit的所有用法。

很简易,可是很强劲

自然,还可以用background-size处理照片伸缩难题

比如淘宝网:

当从文章内容提取的照片和文章内容list的展现块规格占比不1致的情况下,情况图可根据特定 background-size:contain | cover 来防止对照片导致的缩小或拉伸。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。