在实际场景中，我们经常会遇到图片大小固定的需求，但是由于原始图片大小，比例不一样，不同图片以相同的大小展示会参差不齐。解决方法就是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. vue项目中获取cdn域名插件

    import axios from 'axios' let CdnPath = {} CdnPath.install = function (Vue, options) { Vue.prototype ...

  2. ArcGIS API for JavaScript与 npm

    在4.7版本中,不仅增加了WebGL的渲染支持(渲染前端速度加快,渲染量也加大).增强了ES6中的Promises语法支持,还支持了npm管理及webpack打包,实属喜讯. “意味着可以不经过esr ...

  3. SharpMap和NetTopologySuite叠加分析问题

    先附上实现的相交叠加分析的部分代码,然后请教个问题,希望能够得到解答. /// <summary> 执行相交叠加分析 </summary> private void Execu ...

  4. 如何简单的构建Android？

    原文链接:https://fernandocejas.com/2014/09/03/architecting-android-the-clean-way/   过去的几个月中,在Tuenti上与同行例 ...

  5. linux下mysql配置文件位置

    在/usr/share/mysql/ 中找到my.cnf的配置文件,拷贝其中的my-huge.cnf 到 /etc/ 并命名为my.cnf

  6. jquery实现静态柱形图（写死的数据，只为系统首页UI更美观）

    这段时间比较空闲,便阅读公司做好的项目的源代码,学习学习同事的开发思路. 在项目中使用图表可以很好地提高人机交互的友好度,开发的时候看到项目的首页有两个很小的柱形图,很漂亮,便找到对应的代码看了看,发 ...

  7. Python第十五天 datetime模块 time模块 thread模块 threading模块 Queue队列模块 multiprocessing模块 paramiko模块 fabric模块

    Python第十五天  datetime模块 time模块   thread模块  threading模块  Queue队列模块  multiprocessing模块  paramiko模块  fab ...

  8. MacBook Pro 安装win7 64 成功安装过程总结

    安装对象: MacBook Pro (13 英寸, 2010 年中) 中安装win7 64位操作系统(原版安装非Ghost),且只保留win7系统即可. 场景还原: 拿到笔记本时,笔记本中已无Mac ...

  9. 记录Nginx代理的配置

    server { listen  80; server_name localhost; location / { root    /ect/share/nginx/html; index   inde ...

  10. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...