在实际场景中，我们经常会遇到图片大小固定的需求，但是由于原始图片大小，比例不一样，不同图片以相同的大小展示会参差不齐。解决方法就是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. 20190421-那些年使用过的CSS预处理器（CSS Preprocessor）

    写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...

  2. Git - git branch - 查看本地仓分支列表

    索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git branch 二.说明: 该命令将列出本地所有存在分支, 包括 本地独有分支与远端在本地签出的分支, 但是没有签出的远端 ...

  3. matplotlib箱线图与柱状图比较

    代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...

  4. git开发常用命令

    1.基本命令git branch 查看本地分支git branch -r 查看远程分支git checkout xxx 切换分支git pull origin master //从远程同步到本地,ma ...

  5. nginx预防常见攻击

    目录 nginx防止DDOS攻击 概述 攻击手段 配置 限制请求率 限制连接的数量 关闭慢连接 设置 IP 黑名单 设置IP白名单 小站点解决方案 nginx防止CC攻击 概述 主动抑制方法 应用举例 ...

  6. Postgres 优雅存储树形数据

    碰到一个树形数据需要存储再数据控制,碰到以下两个问题: 在PG数据库中如何表达树形数据 如何有效率的查询以任意节点为Root的子树 测试数据 为了更加简单一些,我们将使用一下数据 Section A ...

  7. Python基础之函数和模块

    函数的基本使用 函数的定义:把具有独立功能的代码块组织成一个小模块,在需要的时候调用.或者说,函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数的使用:1.定义函数:2.调用函数 ...

  8. python接口自动化-传 json 参数

    一.post请求有两种方法传json参数: 1.传json参数(自动转 json ) 2.传data参数(需 json 转换) 代码参考: payload = { "Jodie": ...

  9. 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素

    最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...

  10. ztree 为节点添加点击触发事件

    <SCRIPT type="text/javascript"> var setting = { data : { key : { title : "code& ...