CSS Transform scale - 图像仍然占用空间

Question

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

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

Answer 1

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

您必须调整图像的宽度/高度，而不是使用变换。

演示 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>