Question

我有以下HTML：

<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％高。（如果某些图像从左侧或右侧被剪掉，则可以。）

文章的高度未知，所以我不能硬编码。

提前致谢！

Answer 1

使用background-image设置图片，background-size: 100% auto设置为背景图片尺寸。

Answer 2

这是执行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%;
}

添加或删除内容以查看采用高度的图像：）

Answer 3

你可以使用这个类：

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

}

例如

;

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

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

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

3 个答案: