logo标签列表

CSS变换缩放 - 图像仍占用空间

csstransform
5

当下列CSS属性添加到图像中时，图像仍占据其以100％大小调整时的相同空间？有没有办法使文本填充围绕此图像的空间？

transform: scale(0.2);
height: auto;
float: right;
1个回答
6

据我所知，transform并不是这样工作的。它只会在视觉上改变外观；原始对象的实际尺寸将保持不变。

您需要调整图像的宽度/高度而不是使用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>

编辑：它只需要很长时间才能加载 - The Onin
交换了位置的培根...嗯嗯，培根！ - Paulie_D
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接