CSS 变换比例 - 图片仍然占据 space

Question

当将以下 CSS 属性添加到图像时，图像仍然占据与 100% 尺寸时相同的 space？有没有办法让文字填满这张图片周围的 space？

transform: scale(0.2);
height: auto;
float: right;

Answer 1

这不是我所理解的 transform 的工作方式。它只是在视觉上改变外观；原始对象的实际尺寸保持不变。

您必须调整图像的 width/height 而不是使用变换。

jsFiddle 和 StackSnippets 中的演示：

div {
  background: #bae5fc;
  overflow: hidden;
  margin-bottom: 25px;
  width: 40%;
  float: left;
  margin: 2%;
  padding: 4px;
}

img {
  float: right;
  display: block;
  transition: all 0.5s ease;
  max-width: 50%;
}

.trans:hover img {
  transform: scale(0.5);
}

.dimen:hover img {
  max-width: 25%;
}

<div class="trans">
  <img src="https://picsum.photos/400/200" alt="" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
    Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
    a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
    odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
  </p>
</div>

<div class="dimen">
  <img src="https://picsum.photos/400/200" alt="" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
    Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
    a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
    odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
  </p>
</div>

CSS 变换比例 - 图片仍然占据 space

CSS Transform scale - image still takes up space

css

transform

jsFiddle 和 StackSnippets 中的演示：