调整包含缩放图像的父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>