css - 将图像高度设置为其容器的 75%

Question

我有一个响应式图片列表。每个图像都在一个容器内。 我希望图像容器是其第一个容器(在本例中为单位容器)的 75%

图片比例为1:1

我对图像容器百分比宽度做了一些调整，但感觉这不是解决方案。

<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
    <a href='#' alt="unit">
        <div class="unit_container">
            <div class="icon_container unit_icon">
                <img class="img-responsive unit_image" src="http://placehold.it/60X60" />
            </div>
            <div class="unit_name">FREE</div>
        </div>
    </a>
</li></ul>

顺便说一句，如果这很重要，我正在使用 bootstrap。

http://jsfiddle.net/wmu3w3ej/1/

Answer 1

感谢@Mary Melody

transform: scale(0.75);

像魔术一样工作

我有点不敢使用它，因为它太简单了。

有什么想法吗？