Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

img {
width: 90vw;
height: 75vh;
border: 3px solid tomato;
} .img-con1 img{
object-fit: fill;
}
.img-con2 img{
object-fit: contain;
}
.img-con3 img{
object-fit: cover;
}
.img-con4 img{
object-fit: none;
} .img-con5 img{
object-fit: scale-down;
} .img-con6 img{
object-fit: fill;
object-position: 20px 5px;
} /* Demo styles only */
* {
box-sizing: border-box;
} body {
margin:;
}

[CSS] Control Image Aspect Ratio Using CSS的更多相关文章

  1. Maintain Aspect Ratio Mixin

    Maintain Aspect Ratio Mixin Maintain the aspect ratio of a div with CSS RESPONSIVE ASPECT RATIOS WIT ...

  2. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. CSS性能分析,如何优化CSS提高性能

    不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...

  4. Normalize.css – 现代 Web 开发必备的 CSS resets

    Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...

  5. 你真的精通 CSS 了?来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  6. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  7. 转载:CSS计数器的趣味时光之css计算数据

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  8. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  9. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

随机推荐

  1. FZU 1608 Huge Mission

    Huge Mission Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original I ...

  2. SQL优化工具SQLAdvisor使用(转)

    一.简介 在数据库运维过程中,优化SQL是业务团队与DBA团队的日常任务.例行SQL优化,不仅可以提升程序性能,还能够降低线上故障的概率. 目前常用的SQL优化方式包括但不限于:业务层优化.SQL逻辑 ...

  3. [Angular] How to get Store state in ngrx Effect

    For example, what you want to do is navgiate from current item to next or previous item. In your com ...

  4. RS-485总线和Modbus通信协议的关系

    一.RS-485总线 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插件以及通信协议,只是OSI规范中物理层的一个标准,RS-485总线采用差分平衡传输方式.由于RS ...

  5. 解决ListCtrl控件第一列文字不能居中显示的问题/修改网格线

    把CListCtrl设置为Report风格,但是插入第一列的时候(InsertColumn)的时候会发现文字不能居中.即使使用了LVCFMT_CENTER,其他列都可以正常居中,但第一列仍然靠左显示. ...

  6. 《开源公开课分享》:Java开源框架案例分享

        缺乏高端技术人才?缺乏开发标准?    代码复用性低?技术风险难于把控?     招聘成本高?培训成本高?    假设想法不够雄伟,那么就会局限于细节:假设一開始就铺很大的摊子,将会失去控制: ...

  7. 背景剪除和OpenCV中的实现

    转载请注明出处! ! ! http://blog.csdn.net/zhonghuan1992 背景剪除和OpenCV中的实现 背景与前景都是相对的概念.以快速公路为例:有时我们对快速公路上来来往往的 ...

  8. 5. Node基础编程

      基于Chrome V8引擎 单线程 使用JavaScript开发后端代码 非阻塞的IO common规范 common一定是通过module.exports={}输出 创建Http Server ...

  9. 【习题 6-11 UVA - 10410】Tree Reconstruction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以先确定当前这棵子树的dfs序的范围. 然后第一个元素肯定是这棵子树的根节点. 那么只要在这棵子树的范围里面枚举节点. 看看有没有 ...

  10. mybatis 嵌套查询子查询column传多个参数描述

    https://my.oschina.net/softwarechina/blog/375762