Question

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

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

Answer 1

根据我的理解，这并不是变换的工作方式。它只会改变外观直观;保留原始对象的实际尺寸。

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

jsFiddle中的演示＆amp; 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变换比例 - 图像仍然占用空间

1 个答案:

jsFiddle中的演示＆amp; StackSnippets：