aspect-ratio与object-fit搭配的妙用

简介: 本文将从aspect-ratio与object-fit出发,分别了解两个属性的特性,学习如何结合两个新CSS属性来解决

前言

不知道大家会不会经常因为图片的适配而头疼,我经常苦恼于这个问题:如何合理地去裁剪图片,让父元素中的图片以规定的方式去展现。

本文将从aspect-ratioobject-fit出发,分别了解两个属性的特性,学习如何结合两个新CSS属性来解决

aspect-ratio

一般来说我们想要一张图片以固定的宽高比在不同的设备下让其显示得合理(也就是响应式)可以使用相对长度单位,直接设定widthheigth大小,并需要考虑到父元素的高宽设定,我们需要给父元素设定相同的宽度,但是这样并不优雅

aspect-ratio的出现改变了这一现状,它可以一设永逸,官方文档给出该属性的解释为:为容器规定了一个期待的纵横比下面我们来直接对比两个设定方式的不同

image.png

如上面使用码上掘金展示的两种卡片,都事先设定好了容器宽度,第一种直接为图片设定宽高单位,第二种设定了aspect-ratio值为1/1,在这对比之下也就吐出了aspect-ratio的好处

object-fit

object-fit可以控制图片在容器中的显示形态,分别有:完全展开并保持原始比例,完全展开被拉伸铺满容器,铺满容器并保持原始比例但被裁剪。

我将父容器的宽度固定,图片的aspect-ratio属性设置为4/3,分别来看看三种不同情况的效果


  • object-fit的值为**contain**的时候,图片会根据自身比例完全展开,不会在意父容器的宽度,所以不会铺满。
  • 值为fill的时候,图片会完全展开铺满容器,但是会被拉伸,破坏掉原始的比例。
  • 值为cover的时候,图片会保持原始比例并铺满容器,但是溢出的部分会被裁剪。

总结

其最完美的结合就是使用aspect-ratio设定需求的宽度和高度比,再通过设定object-fit值为cover使图片保持原来的形态,且使每个图片都保持相同的宽高,图片的问题就这样迎刃而解了!get到知识的掘友给个三连吧


相关文章
|
7月前
|
前端开发 容器
使用 object-fit 属性完美过渡图片
这篇文章介绍了CSS属性object-fit的用法。object-fit属性用于指定元素的内容如何适应指定容器的高度和宽度。该属性一般适用于img和video标签,可以进行剪切、缩放或拉伸操作。文章中展示了通过object-fit属性来统一设置多张图片的样式,保持原始比例并改变显示位置的示例,以及使用object-position属性实现简单的过渡效果。
使用 object-fit 属性完美过渡图片
|
机器学习/深度学习 算法
随机装箱特征模型(Random Binning Feature Model)代码
在上述代码中,我们首先定义了一个名为RandomBinningFeatureModel的类,并在其__init__方法中接受一个参数num_bins,表示装箱的数量。然后,我们定义了一个名为fit_transform的方法,该方法接受原始输入数据x作为参数,并返回转换后的特征张量xb。
162 0
torch.fill()是怎么使用的?
torch.fill_()函数是一个in-place操作,用于将张量的所有元素设置为给定的标量值。它接受一个标量参数作为输入,该标量将用于填充整个张量。
1209 0
|
算法 数据挖掘 开发者
Measure for evaluating the goodness of a test(二)| 学习笔记
快速学习 Measure for evaluating the goodness of a test。
Measure for evaluating the goodness of a test(二)| 学习笔记
|
算法 数据挖掘 开发者
Measure for evaluating the goodness of a test(一)| 学习笔记
快速学习 Measure for evaluating the goodness of a test。
Measure for evaluating the goodness of a test(一)| 学习笔记
halcon模板匹配实践(2)算子find_shape_model里的参数Row, Column, Angle含义是什么?
halcon模板匹配实践(2)算子find_shape_model里的参数Row, Column, Angle含义是什么?
792 0
halcon模板匹配实践(2)算子find_shape_model里的参数Row, Column, Angle含义是什么?
Halcon之select_shape_xld是支持多个参数过滤的
Halcon之select_shape_xld是支持多个参数过滤的
688 0
|
计算机视觉
轮廓的查找、表达、绘制、特性及匹配(How to Use Contour? Find, Component, Construct, Features & Match)
http://www.cnblogs.com/xrwang/archive/2010/02/09/HowToUseContour.html   作者:王先荣 前言    轮廓是构成任何一个形状的边界或外形线。
1930 0
零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)
原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字的...
1217 0