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