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

我有一个响应式图像列表。每个图像都在一个容器内。我想要的图像容器成为其第一容器（在这种情况下单元容器）的75％将图像高度设置为其容器的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/

来源

2014-09-23 user2587454

同意Flopet的回答，看看这个http://jsfiddle.net/sameerast/wmu3w3ej/3/ – 2014-09-23 07:44:46

'transform：scale（0.75）;'到'.unit_image'？ - http://jsfiddle.net/rtndqhys/ – Anonymous 2014-09-23 07:48:11

@SameeraThilakasiri在这种情况下它没有任何作用，因为父级没有明确的高度。 – 2014-09-23 07:48:23

由于@Mary旋律

transform: scale(0.75);

作品像魔术

我有点害怕，因为它是如此简单的使用它。

有什么想法？

来源

2014-09-23 14:29:42 user2587454

这通常不是你问问题的地方，而是回答他们，甚至为你自己。 Transform对现代浏览器提供了很好的支持来查看这里的问题以及哪些浏览器支持它：http://caniuse.com/#search=transform – Christina 2014-09-23 14:55:56

对不起。:)谢谢！ – user2587454 2014-09-23 15:14:33

使用从这里的逻辑：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>

添加相对定位父，设置它的宽度，如你所愿，并让sur e溢出隐藏。

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

然后，您将图像定位到绝对位置，然后安装到容器上。如果要将图像剪裁而不是调整大小，请从中删除height: 100%和width: 100%样式规则。

来源

2014-09-23 08:14:32 Luke

谢谢我试过这个，但它不保持图像的纵横比1：1。 – user2587454 2014-09-23 09:02:24

你问了75％，所以它不会是1：1，除非你使用这些比例的图像？此外，如果您将最后两种样式移除到图像上，它会裁剪它而不是调整其大小。 – Luke 2014-09-23 09:06:35

你说得对。 sorrry。我编辑了我的问题 – user2587454 2014-09-23 10:36:39

你可以像下面这样做（在你的HTML）：

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

祝你好运！

来源

2014-09-23 08:28:00

回答

相关问题