html中如何等比缩小图片,css如何将图片等比缩放
css将图片等比缩放的方法:可以利用object-fit属性来实现,如【object-fit: cover;】。object-fit属性指定元素的内容应该如何去适应指定容器的高度和宽度。
属性介绍:
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
(学习视频分享:css视频教程)
object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
语法:object-fit: fill|contain|cover|scale-down|none|initial|inherit;
属性值:fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值
inherit 从该元素的父元素继承属性。
举例:
对图片进行剪切,保留原始比例:img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
相关推荐:CSS教程
html中如何等比缩小图片,css如何将图片等比缩放相关推荐
- css用网络图片做背景图片,css 网页背景图片 怎样用CSS实现大背景网页效果
在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片.例如:在小于1024*768分辨率时,是没有问题的.但是假如你的显示器的 ...
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
- html如何拉伸一个图片,css怎么拉伸图片?
css可以使用background-size属性设置图片拉伸,background-size属性规定背景图像的尺寸.此属性可以使用数值.百分比.cover等设置图片拉伸. background-siz ...
- html语言怎么排列图片,css怎么让图片横着排列?
css怎么让图片横着排列?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css让图片横着排列 方法:首先创建一个div来包裹所有的图片:然后隐藏外层di ...
- html中怎么设置文本框居中显示图片,css如何让图片水平居中显示?
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...
- html5中如何放图片,css怎么放图片?
随着互联网的发展,网速不断提升,我们现在的网页也变的更加丰富起来,除了能够传输文字外,我们还可以传输图片.我们该如何使用css在网页中放图片?下面我们俩看一下使用css在网页中放图片的方法. css可 ...
- html中 怎么加入图片,css怎么插入图片?
在前端页面的开发中,插入图片的方法有两种:使用img标签插入图片,使用background属性和background-image属性插入背景图片.下面本篇文章就来给大家介绍一下CSS backgrou ...
- html如何加深图片,css怎么改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix- ...
- 如何html在页面插入图片,css怎么插入图片?
在前端页面的开发中,插入图片的方法有两种:使用img标签插入图片,使用background属性和background-image属性插入背景图片.下面本篇文章就来给大家介绍一下CSS backgrou ...
最新文章
- 软件开发人员能力模型
- 记录贴-配置HTTPS域名访问到本地局域网网关
- httpd: apr_sockaddr_info_get() failed for bogon
- java 有序set_Java 从Set里面取出有序的记录详解及实例
- 6-3Table API SQL简介
- python计算工资编程-Python实现扣除个人税后的工资计算器示例
- 2015Esri全球用户大会top10的QA
- Kali Linux基础-抓包与WIFI密码暴力破解
- 数据结构——BF算法
- OA系统添加审批模板
- 安利几款win10小工具
- 【FICO系列】SAP FICO模块-财务账期的打开和关闭
- Android程序如何全屏显示
- PostgreSQL中的VACUUM
- 大克拉CVD合成钻石市场现状及未来发展趋势
- 我的安卓日程管理软件
- 单元测试 easymock_使用EasyMock更轻松地测试
- 圆盘刻度尺(iOS圆环刻度尺)
- 给网页设计师消遣的网站
- 组合数学之六 —— 差分序列Stirling数