时间戳

首页 > 解决方案 > 如何在样式组件中获取图像大小？

css - 如何在样式组件中获取图像大小？

问题描述

尝试通过以下方式显示图像时：

import photo1 from "./path/photo1.jpg";

export const photo1 = styled.img`
  background: url(${photo1});
`;

宽度设置为 0，高度设置为父级高度。因此，我正在努力根据容器调整元素比例，因为它似乎需要硬编码的大小。

由于元素仍保留其起始0 x 100%大小，因此使用background-size: contain不会自动工作。只有在对宽度进行硬编码后，元素才会正确显示，但该宽度将保持固定，在以后缩放容器时会出现问题。

那么如何动态获取图像原始大小，然后根据容器进行缩放呢？

我也在考虑让图像动态化而不只是硬编码大小并使用多个媒体查询以及相等数量的预先调整大小的图像是否有意义。

顺便说一句，出于好奇，任何人都知道仅使用保持比率来缩放宽度和高度的数学是什么calc()？

标签： cssstyled-components

解决方案

您可以使用 jQuery 来获取实时属性值，如下所示：


$('.element.').property();

example

$('body').width();

将输出 body 标签元素的当前宽度。

推荐阅读