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

使用此处的逻辑：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%样式规则。

Answer 2

感谢@Mary Melody

transform: scale(0.75);

像魔术一样工作

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

有什么想法吗？

Answer 3

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

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

祝你好运！

将图像高度设置为其容器的75％

3 个答案: