CSS: 我可以缩放包含其容器的图像吗？

Question

我有一段文字，段落之间有一张图片。

<p class="bodytext">aslkjfsdlkfj f ldflskl</p>
<p class="image"><img src=1.png/></p>
<p class="bodytext">aslkjfsdlkfj f ldflskl</p>

图像尺寸未在 HTML 中指定，它们是从图像中读取的。我想使用 CSS 缩放图像：

img {
    transform: scale(0.7);
}

但是，这只会缩放图像而不是包含它的框，所以我在文本和图像之间得到了巨大的差距。我想摆脱这个差距。

设置top/bottom边距不起作用
有 'transform-box:' 属性听起来应该可以满足我的需要，但是 none 的设置有任何不同。

应用程序：CSS Antennahouse Formatter 中的分页媒体。

Answer 1

解决方案 #1 使用缩放

有一个非标准的 zoom CSS 属性可以准确地满足您的需求。 Zoom 将始终缩放整个元素，而不仅仅是其内部内容，并且适用于任何类型的 HTML 元素：块、内联、替换元素（图像）或文本。

img {
  zoom: 75%;
}

虽然 the specification 说 "transform: scale() 应该改用"，但它也解释了这两个属性的工作方式不同，因为 "与 CSS 变换不同，缩放会影响元素的布局大小" – 这正是您所需要的。

浏览器对 zoom 的支持非常好。可以使用 states 94.5% support。但是请注意，zoom 实际上是一个非标准的属性 – 不要在您的生产站点上使用它，尽管 实际上 ，它受支持每个主流浏览器除了 Firefox。同时，在您的设置中，您只需要自己打印 HTML 材料（假设为 PDF），这应该是最理想的。

在此处查看工作 JS Fiddle：https://jsfiddle.net/FurloSK/8bhzkrw2/

编辑（见下面 OP 的评论）

解决方案 #2 使用转换：scale() 和固定大小的容器

好吧，是一种强制图像元素缩放并缩放其容器的方法，但有两个问题：

首先，它滥用了几个 CSS 属性，并且由于您使用的不是像 Chrome 这样的普通浏览器，而是特定的软件（Antennahouse Formatter），我怀疑这是否真的会为你工作。
其次，您将不得不手动指定容器大小（这违背了自动确定它的目的）。尽管如此，我还是把它写在这里以供参考，因为它实际上是我在 site of my own（电脑游戏的参考页面）上使用的东西并且 它是一个问题的正确解决方案“如何缩放包含其容器的图像？” – 尽管对于您的特定情况不实用。

HTML代码：

<div class="fixedContainer">
  <img class="smallScale" src="https://via.placeholder.com/100"/>
</div>

CSS代码：

.fixedContainer {
  display: table-cell;
  position: relative;
  overflow: hidden;
  width: 80px; /* 100px * scale(0.75) = 75px */
  height: 80px; /* 100px * scale(0.75) = 75px */
}
.fixedContainer .smallScale {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

再次，请在此处查看工作 JS Fiddle：https://jsfiddle.net/FurloSK/8bhzkrw2/

解决方案 #3 使用宽度属性和自动调整大小的容器

最后一个解决方案应该适合您。它简单且没有使用丑陋的技巧：您只需使用 percentage value 缩小带有 CSS width 的图像，然后设置外部容器的 width 使其元素与 fit-content。容器将从原始图像大小获取其大小，因此为其嵌套图像元素提供“100%”的参考值，然后图像可以按百分比值缩放。

请注意，如果没有 fit-content 部分，div 将没有自己的大小，并且图像的百分比宽度将指代整个页面 - 或具有定义的最近祖先宽度.

HTML代码：

<div class="fitContainer">
  <img class="smallWidth" src="https://via.placeholder.com/100" />
</div>

CSS代码：

.fitContainer {
  width: fit-content;
}
.fitContainer .smallWidth {
  width: 75%;
}

最后，在此处查看工作 JS Fiddle：https://jsfiddle.net/FurloSK/8bhzkrw2/

Answer 2

此 Antennahouse Formatter 特定指令将缩放包含其容器的图像：

img {
-ah-content-width: 70%;
}

也可以使用-ah-content-height，默认按比例缩放。

这旨在匹配 XSLFO 中的行为：它将图像缩放到图像固有大小的 n%。

CSS: 我可以缩放包含其容器的图像吗？

CSS: can I scale an image including its container?

css

css-paged-media

解决方案 #1 使用缩放

编辑（见下面 OP 的评论）

解决方案 #2 使用转换：scale() 和固定大小的容器

解决方案 #3 使用宽度属性和自动调整大小的容器

CSS: 我可以缩放包含其容器的图像吗？

CSS: can I scale an image including its container?

css

css-paged-media

解决方案 #1 使用 缩放

编辑（见下面 OP 的评论）

解决方案 #2 使用 转换：scale() 和固定大小的容器

解决方案 #3 使用 宽度 属性 和自动调整大小的容器

解决方案 #1 使用缩放

解决方案 #2 使用转换：scale() 和固定大小的容器

解决方案 #3 使用宽度属性和自动调整大小的容器