将图像高度设置为其容器的 75%答案

【问题标题】：Set image height to 75% of its container将图像高度设置为其容器的 75%
【发布时间】：2014-09-23 22:29:42
【问题描述】：

我有一个响应式图片列表。每个图像都在一个容器内。我希望图像容器占其第一个容器的 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>

顺便说一句，如果这很重要，我正在使用引导程序。

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

【问题讨论】：

同意 Flopet 的回答，看看这个jsfiddle.net/sameerast/wmu3w3ej/3
transform: scale(0.75); 到 .unit_image? - jsfiddle.net/rtndqhys
@SameeraThilakasiri 在这种情况下没有任何效果，因为父级没有明确的高度。
那么它应该给父母一个明确的高度
@Mary Melody - 可行，但 75% 不包括 .unit_container 填充。

标签： css html responsive-design twitter-bootstrap-3

【解决方案1】：

感谢@Mary Melody

transform: scale(0.75);

像魔术一样工作

我有点害怕使用它，因为它很简单。

有什么想法吗？

【讨论】：

这通常不是您提问的地方，而是回答问题的地方，即使是您自己。 Transform 对现代浏览器有很好的支持看看这里的问题以及哪些浏览器支持它：caniuse.com/#search=transform

【解决方案2】：

使用这里的逻辑：https://stackoverflow.com/a/20117454/3389737

我已将其应用于您的情况：http://jsfiddle.net/phwaLmen/1/

#wrapper
{
    position: relative;
    width: 50%;
    overflow: hidden;
}

#wrapper:before
{
    content: "";
    display: block;
    padding-top: 75%;
}

#image
{
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
    height: 100%;
    width: 100%;
}

<div id="wrapper">
    <img src="http://placehold.it/350x350" id="image">
</div>

为父级添加相对定位，根据需要设置其宽度并确保隐藏溢出。

为包装器创建一个 :before 元素，其顶部填充率为 75%。由于没有为#wrapper 指定高度，因此这 75% 是基于元素的宽度:)

然后你就有了你的图像，绝对定位，然后安装到容器中。如果您希望图像被裁剪而不是调整大小，请从中删除 height: 100% 和 width: 100% 样式规则。

【讨论】：

谢谢我试过了，但它不能保持图像的纵横比 1:1。
您要求的是 75%，所以除非您使用具有这些比例的图像，否则它永远不会是 1:1？此外，如果您删除图像的最后两种样式，如前所述，它会裁剪而不是调整大小。
这真的没有意义

【解决方案3】：

你可以这样做（在你的 html 中）：

<img src="img.jpg" height="75%" />

祝你好运！

【讨论】：