首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在给图像标签赋予object-fit:contain属性后,我们如何获得新的图像尺寸尺寸?

在给图像标签赋予object-fit:contain属性后,我们可以通过以下步骤获得新的图像尺寸:

  1. 首先,需要获取原始图像的尺寸。可以使用JavaScript中的naturalWidthnaturalHeight属性来获取图像的原始宽度和高度。
  2. 接下来,需要获取包含图像的容器元素的尺寸。可以使用JavaScript中的clientWidthclientHeight属性来获取容器元素的宽度和高度。
  3. 然后,根据object-fit:contain属性的特性,图像会按比例缩放以适应容器元素。因此,可以通过比较容器元素的宽高比和图像的宽高比来确定缩放比例。
    • 如果容器元素的宽高比大于图像的宽高比,则图像的宽度将等于容器元素的宽度,高度将根据比例进行缩放。
    • 如果容器元素的宽高比小于图像的宽高比,则图像的高度将等于容器元素的高度,宽度将根据比例进行缩放。
    • 如果容器元素的宽高比等于图像的宽高比,则图像将完全适应容器元素,不进行缩放。
  • 最后,根据缩放比例和原始图像的尺寸,可以计算出新的图像尺寸。
    • 如果图像的宽度是等于容器元素的宽度,则新的图像高度等于原始图像高度乘以缩放比例。
    • 如果图像的高度是等于容器元素的高度,则新的图像宽度等于原始图像宽度乘以缩放比例。

需要注意的是,以上步骤是基于前端开发中的HTML和JavaScript实现的。在实际开发中,可以使用相关的前端框架或库来简化这些操作。另外,腾讯云提供了丰富的云计算产品和服务,可以根据具体需求选择适合的产品和服务进行开发和部署。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深入了解CSS中object-fit和background-size——CSS图片尺寸控制&应用场景

现在我们明白了这是如何工作,让我们来看看这在浏览器中是如何工作。(剧透警告:这更容易!)...CSS object-fit object-fit属性定义了被替换元素(如img或video)内容应如何调整大小以适应其容器。object-fit默认值是fill,这可能导致图像被挤压或拉伸。...除了object-fit我们还有object-position属性,它负责在其容器中定位图像。...: cover; } 第二个修复方法是使用宽高比CSS属性。...总结 正如我们所看到object-fit和background-size对于处理不同图像长宽比都非常有用。我们并不总是能够控制为每张图片设置完美的尺寸,而这正是这两个CSS特性闪光点。

2.9K42

让图片完美适应:掌握 CSS object-fit与object-position

所以,如果我们有一个300px乘300px图像,并将其尺寸设置为300px乘200px,图像会出现扭曲。 object-fit 属性我们提供了图像在该调整内容框内显示选项。...使用 object-fit图像适应容器 object-fit 属性我们提供了五个主要关键字值,以确定我们图像如何在其容器内显示。...当我们稍后查看object-position属性时,我们将学习如何指定图像可见部分。 object-fit: contain contain 值强制图像完全适应其内容框,但不会扭曲。...object-fit: none none 属性允许图像保持其自然原始尺寸。只有可以适应调整内容框部分才是可见。...在响应式布局中使用 object-fit object-fit 属性图像指定区域尺寸响应浏览器视口大小情况下可能最有用。

33110

现代图片性能优化及体验优化指南 - 缩放精细化展示及避免布局偏移、拉伸

对图片性能优化及体验优化在今天就显得尤为重要。本文,就将从各个方面阐述,在各种特性满头飞今天,我们可以如何尽可能我们图片资源,进行性能优化及体验优化。...我们会介绍 4 个特性: aspect-ratio object-fit object-position image-rendering 使用 aspect-ratio 避免布局偏移 很多时候,只能使用固定尺寸大小图片...当然,到今天,我们还可以使用 aspect-ratio 设定图片高宽比。 aspect-ratio CSS 属性为容器规定了一个期待宽高比,这个宽高比可以用来计算自动尺寸以及为其他布局函数服务。...我们借助了 aspect-ratio 这个 CSS 中较属性来始终自动获得正确宽高比,无论其父元素宽度如何变化。...object-fit 避免图片拉伸 当然,限制高宽也会出现问题,譬如图片被拉伸了,非常难看: 这个时候,我们可以借助 object-fit,它能够指定可替换元素内容(也就是图片)该如何适应它父容器高宽

1.2K60

宝, 来学习一下CSS中宽高比,让 h5 开发更想你夜!

在这篇文章中,我们将讨论什么是宽高比,我们过去是怎么做做法是什么。当然,也会有一些用例,对它们进行适当回退。...现在,让我们想象一下,这个盒子里有一张重要图片,我们关心它所有细节。 请注意,无论大小如何图像细节都被保留。...通过拥有一致高宽比,我们可以获得以下好处 整个网站图像将在不同视口大小上保持一致。 我们也可以有响应式视频元素。...我们需要是,无论视口大小如何,缩略图尺寸都要一致。为了实现这一点,我们需要使用百分比padding来实现一个宽高比。...蓝色区域是图像大小,object-fit: contain是重要,避免扭曲图像。 Responsive Circles 你是否曾经需要创建一个应该是响应式圆形元素?

1.5K30

img标签实现和背景图一样显示效果——object-fit和object-position

下面我们便来简单讨论如何实现让长方形图片显示出正方形效果,首先我们本次讨论中用到两张图片原图就是上面的两张图片(一张宽度大于高度,另一张高度大于宽度) 1、背景图显示正方形效果做法 首先还是从背景图做法说起...当然:背景图还可以实现很多其他效果,只需要background-size属性使用不同值就可以实现不同效果,例如:cover,contain,这里就不再一一赘述,因为我们重点要说是关于img标签显示图片问题...2、img标签显示正方形效果做法 首先、也是需要设置img标签宽度和高度是一致,另外需要用到一个关键css属性——object-fit:cover。下面还是直接贴出代码: <!...至此,已经实现了我们开头说需求。 3、object-fit其它值 那么object-fit属性还有哪些值呢?   ...注:目前IE应该还不支持object-fit和object-position属性 本博客根据阅读了张鑫旭一篇博客,自己动手实验,张鑫旭这篇博客地址是:http://www.zhangxinxu.com

2.3K60

CSS3 object-fit和object-position

本文作者:IMWeb 郭明慧 原文出处:IMWeb社区 未经同意,禁止转载 最近一直忙于将JavaScript学习笔记整理成电子书,也没什么空闲时间写文章。...趁着今天有点空闲,决定再来折腾一下CSS3中两个属性object-fit和object-position。 这两个奇葩属性是搞毛呢?...替换元素其实是: 其内容不受CSS视觉格式化模型控制元素,比如image,嵌入文档(iframe之类)或者applet,叫做替换元素。比:img元素内容通常会被其src属性指定图像替换掉。...contain : 包含,保持原始尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域宽度或高度一致,部分内容会空白。 cover : 覆盖,保持原始尺寸比例,保证内容区域被填满。...none : 保持可替换元素原尺寸和比例。 scale-down : 等比缩小。就好像依次设置了none或contain, 最终呈现尺寸比较小那个。

89010

CSS3 object-fit和object-position

本文作者:IMWeb 郭明慧 原文出处:IMWeb社区 未经同意,禁止转载 最近一直忙于将JavaScript学习笔记整理成电子书,也没什么空闲时间写文章。...趁着今天有点空闲,决定再来折腾一下CSS3中两个属性object-fit和object-position。 这两个奇葩属性是搞毛呢?...替换元素其实是: 其内容不受CSS视觉格式化模型控制元素,比如image,嵌入文档(iframe之类)或者applet,叫做替换元素。比:img元素内容通常会被其src属性指定图像替换掉。...contain : 包含,保持原始尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域宽度或高度一致,部分内容会空白。 cover : 覆盖,保持原始尺寸比例,保证内容区域被填满。...none : 保持可替换元素原尺寸和比例。 scale-down : 等比缩小。就好像依次设置了none或contain, 最终呈现尺寸比较小那个。

1.1K50

简单说 CSS中 object-fit 与 object-position

上面是object-fit取值为 none 情况,我们看看object-fit取值为 contain 情况。 ?...好,问题解决了,我们来具体看看 object-fit 与 object-position 这两个属性 解释 object-fit 属性 这个属性决定了像img和videos这样替换元素内容应该如何使用他宽度和高度来填充其容器...none 保持替换元素原尺寸和比例。 scale-down 等比缩小。就好像依次设置了none或contain, 最终呈现尺寸比较小那个。...替换元素: 其内容不受CSS视觉格式化模型控制元素,比如img,嵌入文档(iframe之类)或者applet,叫做替换元素。比:img元素内容通常会被其src属性指定图像替换掉。...因为scal-down 就是 none和contain之间进行选择,选择尺寸比较小那个 ,所以它是始终能保证替换元素完整显示,并且它显示最大尺寸就是图片实际尺寸

90440

详解瀑布流布局5种实现及oject-fit属性,附源码

object-fit CSS3 object-fit 属性是用来指定「可替换元素」内容是如何适应到容器中。它值有 5 种。...但为什么内容显示却有不同效果呢,这让我产生了疑惑。本着发现探索精神,就去寻找答案了。 W3c 是这么描述标签创建是被引用图像占位空间。...你控制只是元素尺寸。而内容尺寸则由 object-fit属性控制。 综上索述,是一个空间占位符,并不控制内容。原来如此。感觉自己又进步了。...那如果使用 object-fit属性按照业务需求去控制内容,貌似可以完成任务。 ? 我们把值设为 contain,布局是没有问题了,但是其实很不美观。...劣势:会损失图片一部分可见区域。 到此,我们介绍了图片显示特性以及如何利用 object-fit进行内容控制。

1.2K20

图片布局最全实现方式都在这了!附源码

object-fit CSS3 object-fit 属性是用来指定「可替换元素」内容是如何适应到容器中。它值有 5 种。...但为什么内容显示却有不同效果呢,这让我产生了疑惑。本着发现探索精神,就去寻找答案了。 W3c 是这么描述: 标签创建是被引用图像占位空间。...你控制只是 元素尺寸。而内容尺寸则由 object-fit 属性控制。 综上索述, 是一个空间占位符,并不控制内容。原来如此。感觉自己又进步了。...那如果使用 object-fit 属性按照业务需求去控制内容,貌似可以完成任务。 ? 我们把值设为 contain,布局是没有问题了,但是其实很不美观。...劣势:会损失图片一部分可见区域。 到此,我们介绍了图片显示特性以及如何利用 object-fit 进行内容控制。

1.3K30

继懒加载之后,浏览器又帮你把响应式给实现了

Chrome Canary 中,该元素现在样子: 在我们探讨到底发生了什么,为什么之前,让我们先解决实际问题:我们如何解决它?...每当 标签布局尺寸发生变化,sizes=auto 值就会进行更新,这可能会触发资源加载。...幸运是,我们有一个相对较特性,它就是“尺寸包含”(size containment),专门用来解决这个问题。...important; contain-intrinsic-size: 300px 150px; } 这句意思是:我们在处理带有 sizes=auto 标签吗?...但是,至关重要一个观点就是:当你采用 sizes=auto 时,你图片会默认获得一个 300×150 固定尺寸和 2:1 固定比例,如何挑战或者改变这些默认设定,就取决于你大家需求和想象力了。

15610

微信小程序 video 组件

在点击播放事件中需要找到上一个播放视频 2. 在播放视频之前关闭上一个正在播放视频 关键: 1....如何找到上一个视频实例对象【媒体 / 地图 / wx.createMapContext (qq.com)】 2....如何确认点击播放视频和正在播放视频不是同一个视频 单例模式: 1. 需要创建多个对象场景下,通过一个变量接收,始终保持只有一个对象, 2....若 controls 属性值为 false 则设置 poster 无效 object-fit string contain 否 当视频大小与 video 容器大小不一致时,视频表现形式 【contain...包含(原来尺寸)】【fill 填充(尺寸改变被拉伸)】【cover 覆盖(尺寸不变,等比例放大,短边贴合)】 bindplay eventhandle 否 当开始/继续播放时触发play事件

17110

提案,初识CSSobject-view-box属性

在这篇文章中,将带领大家了解Jake Archibald在今年年初提出CSS属性object-view-box。...它允许我们裁剪或调整被替换HTML元素,就像一个 或 问题 在下面的例子中,我们有一个需要裁剪图像。请注意,我们只想要该图像特定部分。...我们往下看。 图像内在尺寸 内在大小是默认图像宽度和高度。...我们目标是在固有图像上画一个矩形。要做到这一点,我们使用 inset()值。 使用 inset inset()值将基于原始图像宽度和高度,从而形成一个裁剪过图像。...修复图像失真 如果图像尺寸是正方形,那么裁剪结果将是变形。 这可以使用 object-fit 属性来解决。

89320

看完了 2021 CSS 年度报告,我学到了啥?

目前调查来看,用过的人也不是很多,我们来简单介绍一下。 传统 CSS 属性大多是采用物理属性来定义,比如元素尺寸,偏移和边距等属性。...我在之前很多篇文章中都提到过,是一个很好用属性: Web图像组件设计最佳实践 Chrome 88 新功能解读 解读新一代 Web 性能体验和质量指标 给定图片纵横比,浏览器可以自动计算图片尺寸,...img { float: left; shape-outside: circle(50%); } object-fit object-fit 是个比较常用 CSS 属性,它可以指定可替换元素内容应该如何适应到其使用高度和宽度确定框...scale-down 内容尺寸与 none 或 contain一个相同,取决于它们之间谁得到对象尺寸会更小。...我们来看洗面这个例子,两个 P 标签分别用两种内容内在尺寸决定它本身宽度。

82520

现代图片性能优化及体验优化指南

本文,就将从各个方面阐述,在各种特性满头飞今天,我们可以如何尽可能我们图片资源,进行性能优化及体验优化。...最后,介绍了 元素,借助它,我们能更好实现图片渐进增强。 适配不同屏幕尺寸及 DPR 下一个模块,我们来看看图片资源如何更好适配不同屏幕尺寸。...我们会介绍 4 个特性: aspect-ratio object-fit object-position image-rendering 使用 aspect-ratio 避免布局偏移 很多时候,只能使用固定尺寸大小图片...我们借助了 aspect-ratio 这个 CSS 中较属性来始终自动获得正确宽高比,无论其父元素宽度如何变化。...object-fit 取值有 fill、none、contain、cover,与 background-size 类似,可以类比记忆。

1.4K30

超越媒体查询:使用更新特性进行响应式设计

在本文中,我们将探讨许多可用工具(围绕HTML和CSS),从响应图像到相对较CSS函数,无论我们是否使用媒体查询,它们都可以正常工作。...实上,当媒体查询与这些功能一起使用时,它更像是一种补充,而不是一种完整方法。让我们看看它是如何工作。...原因是为了确保我们有适合正确设备正确图像分辨率,因此我们最终不会为较小屏幕下载尺寸过大图像,而这最终可能会降低网站性能 ?。...,为了与这个想法保持一致,我们可以利用CSS功能,例如object-fit属性,当与object-position一起使用时,它可以裁剪图像获得更好焦点,同时保持图像长宽比。...正如前面所介绍,这些是相对单位,最终尺寸值将基于基值。 这在媒体查询中就非常有用,我们只需更改字体大小,然后整个页面就会相应地放大或缩小。

4.1K10

聊聊 Chrome 新增 sizes=auto 属性

2 简介 在网页开发中,我们通常会遇到需要对网页上元素,尤其是图片进行布局和尺寸调整情况。在 HTML 中,我们可以利用一些内置属性来帮助我们完成这项工作,而 sizes 就是其中之一。...所谓 “auto” 模式,实际上是一种让浏览器自动设定图片尺寸模式。在这种模式下,浏览器会试图选择最合适尺寸来显示图片,以获得最佳用户体验。...响应式图像自然尺寸设定可能会让人意想不到复杂,但实际上: 有许多方式可以让已加载资源自然尺寸影响其对应 布局尺寸。...每当 标签布局尺寸发生变化,sizes=“auto” 值就会进行更新,这可能会触发资源加载。...幸运是,我们有一个相对较特性,它就是“尺寸包含”(size containment),专门用来解决这个问题。

10910

web 图像技术:前端引入图片各种方式及其优缺点

它可以是标签,或者是通过CSS background 属性,还可以使用 SVG 。选择正确方式是很重要,它对性能和可访问性有很大影响。...对我来说,srcset可以根据屏幕宽度显示多个图像尺寸,这并不是一种完美的解决方案。它让浏览器选择合适图像,而我们对此无能为力。...调整图像大小 ? 对于,我们还可以使用一组很好特性object-fit和object-position。它们可以控制大小和定位,就像CSS背景图像。...object-fit 值有:fill, contain, cover, none, scale-down。...这是一些入门问题: 为用户保留这个图像很重要吗,还是可以跳过它? 我们是否需要在所有视口尺寸上使用它? 它是静态还是动态变化

4.9K20
领券