在实际场景中，我们经常会遇到图片大小固定的需求，但是由于原始图片大小，比例不一样，不同图片以相同的大小展示会参差不齐。解决方法就是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. 微信h5 video的问题

    https://blog.csdn.net/hf123lsk/article/details/78920211

  2. java或Jmeter实现两个日期相加减（2003-06-01-2003-05-01）

    在beanshell中写入如下代码, import java.io.FileInputStream; SimpleDateFormat myFormatter = new SimpleDateForm ...

  3. 探索SQL Server元数据（一）

    简介 在数据库中,我们除了存储数据外,还存储了大量的元数据.它们主要的作用就是描述数据库怎么建立.配置.以及各种对象的属性等.本篇简单介绍如何使用和查询元数据,如何更有效的管理SQLServer 数据 ...

  4. objective-c高级编程 笔记

    引用计数:通过给对象计数标志,来判断是否释放对象 注:只能释放自己持有的对象 id obj = [NSMutableArray array] 如obj这个对象,并不是你所持有的对象,所以你无法进行释放 ...

  5. C#基础知识之IOC

    依赖注入:http://www.cnblogs.com/leoo2sk/archive/2009/06/17/1504693.html IOC:https://jinnianshilongnian.i ...

  6. [十二省联考2019]D1T2字符串问题

    嘟嘟嘟 省选Day1真是重大失误,T2连暴力都没时间写. 上周五重新答了遍Day1,竟然搞了187分吼吼吼吼. T2按40分写的暴力,结果竟然得了60分. 稍微说一下暴力吧:预处理哈希,对于一组支配关 ...

  7. Spring boot读取application.properties中文乱码

    解决方案 在IDEA环境下: File -> Settings -> Editor -> File Encodings 将Properties Files (*.properties ...

  8. 关于win7+VS2017环境下的opencv-contirb配置的一个坑

    问题出现背景: 由于课题需要用到SURF detector, 我依照网上的一下教程,把opencv-contrib的配置了一遍.但是,当我写了一个小demo来测试模块是否能正常使用的时候,程序能正常编 ...

  9. EXCEL记录

    ー.重要快捷键 Ctrl + F → 查找 Ctrl + H → 替换 Ctrl + G → 定位 Ctrl + 1 → 设置单元格格式 Ctrl + Enter → 一并输入多个单元格 Ctrl + ...

  10. linux 下ab压力测试

    1.ab的简介 ab是apachebench命令的缩写. ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试 ...