zoukankan      html  css  js  c++  java
  • 图片拉伸用于适配不同比例设备

    图片拉伸用于适配不同比例设备

    原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

    经测试object-fit可以用在视频和图片

    contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

    cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。

    fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。

    none被替换的内容将保持其原有的尺寸。

    scale-down内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

    作者:dlm17
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    web component的理解
    cdn
    const 命令
    let 的含义,及let 与 var 的区别
    选择器
    Qt5:Qt中一些函数功能介绍
    给软件工程师自学的建议
    Qt5:渐变效果的实现
    Wayland软件库 :替代 X Window 的软件库
    Qt5:窗口各类位置
  • 原文地址:https://www.cnblogs.com/dlm17/p/12526246.html
Copyright © 2011-2022 走看看