使用 calc() css 调整图像大小

Question

我正在尝试将具有现有高度和宽度属性的任何图像调整一个百分比（并保持比例）。我知道 transform: scale(1.05) 会采用 100 像素 x 100 像素的图像并将其设置为 105 像素 x 105 像素，但它仍然只会占用页面流中的原始 100x100 空间。

我该怎么做：

<img src="an.svg" width="100" height="100" alt="bigger please" class="resize"  data-width="100" data-height="100"/>

img.resize {
  height: auto;
  width: calc(original width * 5%);
}

这样浏览器会渲染一个 105 x 105 像素的图像并占据整个 105x105？

我对这个问题使用了简化的数字，但图像对于任一维度都可以有任何值。

此外，我不能使用包装器或背景图像，但我可以访问图像上存在的数据高度和数据宽度属性。 Codepen 在这里：https://codepen.io/spicedham/pen/qMKLYq

Answer 1

在彻底尝试了我能想到的每一种排列之后，我确实有了某种解决方案。它需要我试图避免的两件事（容器和内联样式），但它作为系统的一部分工作。一些额外的背景：我在一个 web 应用程序上工作，它允许用户设置基本字体大小（想想 12、14、16 或 18pt），然后还可以在上面处理缩放，范围从 10% 到 300%低视力用户。我们有一些图像（主要是数学表达式）作为 SVG 嵌入到周围的页面内容中。在默认打印和缩放级别下，带有数字“3”的 SVG 与旁边的纯文本数字 3 大小相同。但是随着其他变量开始变化，事情变得不匹配。下面描述的技术一旦到位，就可以让我们细粒度地控制这些图像如何与周围的文本匹配，而不管打印尺寸或缩放级别如何。

这是 codepen https://codepen.io/spicedham/pen/pxzYYe 中的解决方案链接以及使用...变量 https://codepen.io/spicedham/pen/MPgxxo 的变体。

这是 CSS：

        .container {
            display: inline-flex;
            vertical-align: middle;
            border-left: solid .05em transparent;
            border-right: solid .05em transparent;
        }
        .scaleMe {
            transform: scale(1.1);
            margin: .05em 0;
        }

这是图像和容器的样子：

<span class="container" style="font-size: 300px;"><img class="scaleMe" src="svg.svg" width="300" height="100" alt="" style="font-size: 100px"/></span>

<span class="container" style="font-size: 100px"><img class="scaleMe" src="svg.svg" width="100" height="200" alt="" style="font-size: 200px"/></span>

无论我使用 calc() 还是 transform:scale()，我遇到的问题是我无法让内容始终围绕调整大小的图像重排 - 放大的图像会与相邻内容重叠。如果所有图像都具有相同的大小或它们都具有相同的比例，这是可能的，但这不是我在我们的系统中可以指望的东西。

另一个问题是使用百分比作为单位，虽然是合乎逻辑的选择，但并不像您期望的那样工作。

所以解决方案是创建一个 em 的替代相对单位。我取了图像的宽度（比如 300 像素）并将其设置为容器的字体大小。然后我获取图像的高度（比如 100 像素）并将其设置为图像的字体大小。这使我可以支撑打开容器以占用与缩放图像相同的空间。绕过不能使用百分比作为边框宽度的限制，并准确设置图像上边距和下边距百分比的等效值。

Answer 2

假设您有一个可用的容器来放置图像，您可以轻松地使用 calc 来获取图像的高度和宽度

查看这支笔以查看示例。 https://codepen.io/calebswank11/pen/gdKBRE

.container {
  width: 300px;
  height: 300px;
}
img {
  display: block;
  width: calc(100% + 5%);
  height: calc(100% + 5%);
  left: -2.5%;
  top:-2.5%;
  position: relative;
}

Answer 3

如果不是完全需要使用img 标签（如果图像是动态的，则始终具有相同的纵横比），那么您可以使用带有背景图像的 div，并给它height: 0; 和@ 987654323@ （或任何可以创建适当纵横比的百分比）并使用 css 转换对其进行修改

Answer 4

我认为您不能使用图像的宽度/高度属性来定义新的宽度/高度。您可能可以像这样考虑内联样式和 CSS 变量：

img {
  width:calc((var(--width) * 5/100 + var(--width))*1px);
  height:auto;
}

<img src="https://picsum.photos/100/100?image=1069" height="100" >
<br>
<img src="https://picsum.photos/100/100?image=1069" height="100" style="--width:100">