0

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

<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);
}

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

  • 设置顶部/底部边距不起作用
  • 有'transform-b​​ox：'属性听起来应该可以满足我的需要，但是没有任何设置有任何区别。

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

4

2 回答 2

1

解决方案 #1 使用缩放

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

img {
  zoom: 75%;
}

尽管规范说“应该使用transform: scale()”，但它也解释了这两个属性的工作方式不同，因为“与CSS Transforms不同，缩放会影响元素的布局大小” ——这正是你所需要的你的情况。

浏览器支持zoom非常好。CanIUse表示 94.5% 支持。但是请注意，这zoom实际上是一个非标准属性 - 不要在您的生产站点上使用它，尽管事实上，除了Firefox之外的所有主要浏览器都支持它。同时，在您的设置中，您只需要自己打印 HTML 材料（比如说 PDF），这应该是理想的。

在这里查看工作的 JS Fiddle：https ://jsfiddle.net/FurloSK/8bhzkrw2/

编辑（请参阅下面的 OP 评论）

解决方案 #2 使用transform: scale()和固定大小的容器

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

  1. 首先，它滥用了几个 CSS 属性，而且由于您使用的不是 Chrome 等通用浏览器，而是特定软件（Antennahouse Formatter），我怀疑这是否真的适合您。
  2. 其次，您将不得不手动指定容器大小（哪种方式违背了自动确定它的目的）。尽管如此，我还是把它写在这里以供参考，因为它实际上是我在我自己的网站上使用的东西（电脑游戏的参考页面），它是“如何缩放图像”问题的正确解决方案包括它的容器？” – 尽管对您的具体情况不实用。

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 使用宽度属性和自动调整大小的容器

最后一个解决方案应该适合您。它使用了简单且没有丑陋的技巧：您只需使用 CSSwidth使用百分比值缩小图像，并设置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/

于 2021-11-01T01:29:30.783 回答
1

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

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

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

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

于 2021-11-08T12:34:56.220 回答