在实际场景中，我们经常会遇到图片大小固定的需求，但是由于原始图片大小，比例不一样，不同图片以相同的大小展示会参差不齐。解决方法就是object-fit或者background-size属性。他们的区别是前者用于指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，后者用于规定背景图像的尺寸。关于各自的属性值可看MDN文档，经常用到的属性值就是cover，它可以根据图片宽高比例来填充内容框/背景大小，如果图片的宽高比与内容框/背景不相匹配，该图片将被剪裁以适应内容框。除此之外：object-fill还可用于解决video标签充满父元素的问题。

css解决图片拉伸问题的更多相关文章

  1. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

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

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

  3. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  4. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  5. 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)

    一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...

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

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

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

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

  8. css 背景图片拉伸[转]

    http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...

  9. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

随机推荐

  1. Windows Azure NotificationHub+Firebase Cloud Message 实现消息推动（付源码）

    前期项目一直用的是Windows azure NotificationHub+Google Cloud Message 实现消息推送, 但是GCM google已经不再推荐使用,慢慢就不再维护了, 现 ...

  2. pthread小结

    参考1 https://computing.llnl.gov/tutorials/pthreads/ 参考2 http://man7.org/linux/man-pages/man7/pthreads ...

  3. web测试之功能测试总结

    web测试是什么? web测试就是基于BS架构的软件产品的测试,通俗点来说就是web网站的测试 web功能测试包括哪些方面? 功能测试主要包括6大部分: 1.链接测试 2.表单测试 3.搜索测试 4. ...

  4. 通过 Sqoop1.4.7 将 Mysql5.7、Hive2.3.4、Hbase1.4.9 之间的数据导入导出

    目录 目录 1.什么是 Sqoop? 2.下载应用程序及配置环境变量 2.1.下载 Sqoop 1.4.7 2.2.设置环境变量 2.3.设置安装所需环境 3.安装 Sqoop 1.4.7 3.1.修 ...

  5. c/c++ 继承与多态 文本查询的小例子（智能指针版本）

    为了更好的理解继承和多态,做一个文本查询的小例子. 接口类:Query有2个方法. eval:查询,返回查询结果类QueryResult rep:得到要查询的文本 客户端程序的使用方法: //查询包含 ...

  6. WIN10REALTEL高清音频管理器如何调音？调音无效怎么办？

    从win7升级到win10,发现realtel高清音频管理器不能调节高级音响效果了,即使设置也没用. 经过研究后发现是驱动 问题,不是驱动 没有安装,而是可能 没有安装完整,于是下载了驱动精灵,重新安 ...

  7. VS2017打开低版本的VS MVC架构的项目的时候需要修改的地方

    1.需要修改的是.sln文件,即将里面的 Version改为12,其中的VS的版本改为2017 2.项目中后缀名为 .csproj中的代码改一下:

  8. hexo 建站参考

    1. hexo 官网 2. 主题 AD:https://godbmw.com/ 前期尝试了两天都是看主题,还有编辑主题,最终选择这个主题是因为两点 主题layout是 ejs 学习node时候了解过  ...

  9. iview render Datepicker 起止时间限制

    { title: '开始时间', key: 'planDateFrom', minWidth: 120, sortable: true, align: 'center', render: (h, pa ...

  10. NodeJs之服务搭建与数据库连接

    NodeJs之服务搭建与数据库连接 一,介绍与需求分析 1.1,介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻 ...