如何将响应图像高度设置为100％？

我有以下HTML：如何将响应图像高度设置为100％？

<article class="post clearfix"> 
    <div class="post-img"> 
     <img src="path/to/img"/> 
    </div> 
    <div class="post-details"> 
     [content] 
    </div> 
</article>

下面CSS：

img { 
    max-width: 100%; 
    height: auto; 
} 
.post-img { 
    float: left; 
    width: 33.33%; 
    margin-right: 1.5em; 
    overflow: hidden; 
}

我想div.post-IMG 100％作为其母公司的文章一样高，而对于IMG里面它也是100％高。（如果某些图像从左侧或右侧剪下，则可以。）

文章的高度未知，因此我无法对其进行硬编码。

在此先感谢！

来源

2014-10-03 Brian O' Neill

你为什么不只是增加高度：100％？ – 2014-10-03 15:32:42

我试过了......它不起作用。（假设你的意思是将高度：100％添加到包含div的.post-img中。是否需要将样式应用于父项（文章）以使其有效？ – 2014-10-03 15:35:07

你可以使用这个类：

.full-height{ 
    height:100vh; /* 100% vertical hieght */

}

例如;

<img class="full-height" alt="" src="test.png" />

这是显示全高度图像的最佳方式。

来源

2014-10-03 15:35:18

您是在暗示“高度：100％”还是“设置'高度'明确吗？即图像是400px高，'高度：400px;'。 – hungerstar 2014-10-03 15:37:36

http://caniuse.com/#search=viewport尚未完全采用，但仍然是未来web开发的一个很好的解决方案 – Phlume 2014-10-03 15:49:40

使用background-image设置图像和background-size: 100% auto为背景图像大小。

来源

2014-10-03 15:35:49 monkeyinsight

这里是一个选项来做到这一点http://jsfiddle.net/237u55q1/1/

.post{ 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    overflow: hidden; 
} 
.post-img { 
    display: table-cell; 
    width: 33.33%; 
    margin-right: 1.5em; 
    overflow: hidden; 
    vertical-align: top; 
    position: relative; 
} 
.post-img img{ 
    width: 100%; 
    height: auto; 
    position: absolute; 
} 
.post-details{ 
    display: table-cell; 
    vertical-align: top; 
    width: 66.66%; 
}

添加或删除的内容看图像采取新的高度:)

来源

2014-10-03 15:55:03

您也可以通过使用'width：auto; height：100％'来缩放图像，使其适合高度，如果要裁剪图像，则可以选择使用'right：0'曝光图像的右侧，很好的答案！ – 2014-10-03 16:13:20

如何将响应图像高度设置为100％？

回答

相关问题