一、先来个实战

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似乎是被人忽视的一个CSS3属性。因为存在兼容性,所以没有background-size好用,但是由于某种情况,你不得不用img标签来引入图片,这时候用object-fit是很好的选择。

我们给上图所有img都统一加上object-fit: cover;属性,看看效果:

完美解决！真的很方便,只需要一行css

我们具体学一下object-fit

属性 描述
fill 默认值。整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。
contain 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover 被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。
none 内容尺寸不会被改变。
scale-down 内容的尺寸就像是指定了none或contain，默认应用尺寸最小的值

我们用一张图片作为例子解析以上上面各个属性:

//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. fill: 默认值,和未设置一样。会将图片压缩拉伸
  2. contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。例如上面,图片的高度达到父容器高度后,宽度按照比例生成,导致左右留白
  3. cover: 和contain不一样,cover是以最大值为规定的。例如上图,图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续'生长',直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪
  4. none: 顾名思义宽高对图片不起作用,即使设置了固定的宽高,图片仍然以原始大小展现,但是超出设置的值会被遮挡
  5. scale-down: 以contain或none图片最小尺寸为标准.

以上就是object-fit的全部用法。

很简单,但是很强大

当然,也可以用background-size解决图片伸缩问题

例如淘宝网:

当从文章提取的图片和文章list的展示块尺寸比例不一致的时候，背景图可通过指定 background-size:contain | cover 来避免对图片造成的压缩或者拉伸。

一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)的更多相关文章

  1. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  2. <转载>CSS解决图片过大撑破DIV的方法

    DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...

  3. object-fit 解决图片指定大小被压缩问题

    object-fit 解决图片指定大小被压缩问题 第一次遇到这个属性,是在给video 写 poster的时候,选取的作为poster的img的尺寸有点小,导致video播放器两边有留白.在控制台查看 ...

  4. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  5. Excel数组排序+图片统一大小

    Sub 图片调整合适大小() ' Debug.Print ActiveWorkbook.Name 图片显示比例 = 0.9 '1为顶满单元格 Dim wb As Workbook, sh As Wor ...

  6. css解决图片拉伸问题

    在实际场景中,我们经常会遇到图片大小固定的需求,但是由于原始图片大小,比例不一样,不同图片以相同的大小展示会参差不齐.解决方法就是object-fit或者background-size属性.他们的区别 ...

  7. css 解决图片下小空隙问题

    http://baijiahao.baidu.com/s?id=1581004863053583633&wfr=spider&for=pc 这篇讲的挺清楚,也有解决办法

  8. CSS解决图片缩小不变形

    我会在图片上加: <img style="max-width:80px;max-height:80px;"> 限制其最大宽度和高度

  9. CSS强制图片大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style type ...

随机推荐

  1. <转>jmeter（十二）关联之正则表达式提取器

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  2. web前端学习：JavaScript学习指南

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  3. oj练习---dp专题

    1.POJ 3744 Scout YYF I 经典的dp模型,但是要用到快速矩阵幂加速,分段的思想 # include <stdio.h> # include <algorithm& ...

  4. PHP实现的自定义图像居中裁剪函数示例

    图像居中裁减的大致思路: 1.首先将图像进行缩放,使得缩放后的图像能够恰好覆盖裁减区域.(imagecopyresampled ― 重采样拷贝部分图像并调整大小) 2.将缩放后的图像放置在裁减区域中间 ...

  5. django创建ORM模型、通过ORM模型操作单个表、ORM模型常用字段

    一.ORM简介 ORM ,全称Object Relational Mapping,中文叫做对象关系映射,通过ORM我们可以通过类的方式去操作数据库,而不用再写原生的SQL语句.通过把表映射成类,把行作 ...

  6. jquery获取包含本身的元素

    我们知道,使用jquery获取一个元素内的所有元素非常容易,使用jQuery.html()就可以. 如果是js语法的话,使用domObj.innerHTML也很容易实现. 那么问题来了,要想获取包涵节 ...

  7. 运行android模拟器，emulator: ERROR: x86 emulation currently requires hardware acceleration!

    运行android模拟器,emulator: ERROR: x86 emulation currently requires hardware acceleration! 问题: 运行android模 ...

  8. mysql/oracle jdbc大数据量插入优化

    10.10.6  大数据量插入优化 在很多涉及支付和金融相关的系统中,夜间会进行批处理,在批处理的一开始或最后一般需要将数据回库,因为应用和数据库通常部署在不同的服务器,而且应用所在的服务器一般也不会 ...

  9. Intellij IDEA搭建vue-cli项目

    1.安装/升级node环境 vue-cli对于node和npm的版本是有要求的.     可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看 ...

  10. Deep Learning for NLP

    Deep Learning for NLP The First Paper Proposed Bi-LSTM+CRF 我认为,第一篇提出 Bi-LSTM+CRF 架构的文章是: Huang Z, Xu ...