CSS转换比例-图像仍会占用空间 [英] CSS Transform scale - image still takes up space

问题描述

当将以下CSS属性添加到图像时，图像仍占据与尺寸为100％时相同的空间吗?有没有办法使文本填充此图像周围的空间?

When the following CSS property is added to an image, the image still occupies the same space that it did when it was sized at 100%? Is there a way to make the text fill the space around this image?

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

推荐答案

据我所知，这不是转换的工作方式.它只能视觉上更改外观；保持原始对象的实际尺寸.

That's not how transform works as I understand it. It only changes the appearance visually; the actual dimensions of the original object are maintained.

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

You would have to adjust the width/height of the image rather than use transform.

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转换比例-图像仍会占用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！