在实际场景中，我们经常会遇到图片大小固定的需求，但是由于原始图片大小，比例不一样，不同图片以相同的大小展示会参差不齐。解决方法就是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. 安装centos5.x的基本优化配置

    1.添加账号

  2. 第二章 Linux目录学习

    Linux 目录结构相对windows来说更简单,Linux 目录 以 斜杠 / 为根目录,其整体结构是以/为根的树状结构. 使用 tree -L 1 查看1级目录结构 /bin 常用的二进制命令目录 ...

  3. Linux下载_Linux系统各种版本ISO镜像下载（redhat,centos,oracle,ubuntu,openSUSE）

    以下是风哥收集的Linux系统各种版本ISO镜像下载,包括redhat,centos,oracle,ubuntu等linux操作系统. Linux下载1:红帽RedHat Linux(RHEL5.RH ...

  4. coolite 获取新的页面链接到当前页面指定位置Panel的运用

    如下图所示,点击温州市文成县之前,右边是一片空白,点击后生成新的页面 html运用到了coolite的Panel控件 <Center> <ext:Panel ID="Pan ...

  5. Python基础之元组

    元组初识 元组的认识 首先,我们来认识一下元组: # 定义一个元组 uesr_tuple = ("zhangsan", "lisi", "wangwu ...

  6. video相关参数、操作和事件

    1.参数 video是h5的新特性(虽然新了很多年了),使得枯燥的页面有了很多生机.html代码示例: <video id="kingdom-video" src=" ...

  7. 下载带有kali linux系统的VMware如何打开虚拟机？

    下载带有kali linux系统的VMware如何打开虚拟机? 一.安装VMware 温馨提示:如果你对虚拟机一无所知的话,最好不要自己下载kali linux系统的ISO镜像和VMware虚拟机,然 ...

  8. handsontable合并表头

    想在页面中做类似excel的操作,发现handsontable符合要求. 然后发现这个文章 http://blog.csdn.net/wynan830/article/details/9054195 ...

  9. 【原创】谈谈线上CPU100%排查套路

    引言 不知道在大家面试中,有没有遇到这个问题 生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题呢? 这个问题分为两版回答! 高调版 对不起,我是做研发的,这个问 ...

  10. iframe知识点详解

    <iframe>标签规定一个内联框架,一个内联框架被用来在当前HTML文档中嵌入另一个文档. 1. 常用属性 2. 主要API 3. 轮询 4. 长轮询 5. 自适应 6. 安全性 7. ...