css - 调整包含缩放图像的父 div 的大小

Question

我目前正在尝试使用 transform: scale() 来显示清晰/清晰的响应图像。它有效，但不幸的是，父容器似乎无法适应缩小的图像。看到这个 jsfiddle:https://jsfiddle.net/jL5u85jy/ div 似乎占用了图像原始大小的空间，而不是新缩小后的空间。

有没有一种方法可以让父容器适应缩放图像而无需设置特定高度？欢迎任何提示或建议，提前致谢!

Answer 1

嗯，你的问题来自这样一个事实，即使用 transform: scale() 缩放的图像 在未缩放的对应部分仍然占用相同数量的空间。

这很酷，因为我们可以在影响文档流的情况下扩展内容。但在你的情况下，这是一个障碍。您有什么理由不想只缩放宽度吗？

它看起来和我一样脆吗？

.container {
  background:blue;
  margin-bottom:20px;
}
.scaled-image {
  -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
}
.scaled-width-image {
width: 250px;
}

<h2>Scaled .5 </h2>
<div class="container">
  <img class="scaled-image" src="http://i.imgur.com/shBwMW4.jpg" />
</div>

<h2>width: 250px; (half of its original 500px width) </h2>
<div class="container">
  <img class="scaled-width-image" src="http://i.imgur.com/shBwMW4.jpg" />
</div>

<h2>Original</h2>
<div class="container">
  <img class="regular-image" src="http://i.imgur.com/shBwMW4.jpg" />
</div>