Html 使用CSS的表格单元格中的Img高度百分比

我这里有一个JSFIDLE： 由于某些原因，我无法将图像高度设置为50%

<div class="column img">
    <div class="images right">
        <img src="{path-to-image}" />
    </div>
</div>

为什么我不能正确编辑图像的高度

编辑：

---

我已经替换了图像的

src

，它可以处理比高大和正方形更宽的图像，但是我想使用的图像是高大的矩形，这不起作用。为什么会这样？

这对我很有效。也许你的项目中有另一个css文件或代码改变了你的图片大小

.行{
显示：表格行；
宽度：100%；
}
.栏目{
显示：表格单元格；
身高：100%；
位置：相对位置；
}
.img{
宽度：22%；
}
.txt{
宽度：50%；
垂直对齐：中间对齐；
}
.文本p{
宽度：90%；
利润率：10px自动；
线高：1.5；
空白：预包装；
字号：18px；
字体系列：Lato；
}
.对{
文本对齐：右对齐；
}
.图像{
身高：100%；
位置：相对位置；
}
.图像img{
身高：50%；
}
.图像20 img{
身高：10%；
}

---

请检查下页左框中的代码

.行{
显示：表格行；
宽度：100%；
}
.栏目{
显示：表格单元格；
身高：100%；
位置：相对位置；
}
.img{
宽度：22%；
}
.txt{
宽度：50%；
垂直对齐：中间对齐；
}
.文本p{
宽度：90%；
利润率：10px自动；
线高：1.5；
空白：预包装；
字号：18px；
字体系列：Lato；
}
.对{
文本对齐：右对齐；
}
.图像{
身高：100%；
位置：相对位置；
}
.图像img{
身高：50%；
}
.图像20 img{
身高：20%；
}
/* 50% */

.row {
    display: table-row;
    width: 100%;
}
.column { display: table-cell; height: 100%; position: relative; }
.img {  width: 22%; }
.txt { width: 50%; vertical-align: middle; }
.text p {
    width: 90%;
    margin: 10px auto;
    line-height: 1.5;
    white-space: pre-wrap;
    font-size: 18px;
    font-family: Lato;
}
.right { text-align: right; }
.images { height: 100%; position: relative; }
.images img { height: 50%; }

<style type="text/css">
    .row {
        display: table-row;
        width: 100%;
    }

    .column {
        display: table-cell;
        height: 100%;
        position: relative;
    }

    .img {
        width: 22%;
    }

    .txt {
        width: 50%;
        vertical-align: middle;
    }

    .text p {
        width: 90%;
        margin: 10px auto;
        line-height: 1.5;
        white-space: pre-wrap;
        font-size: 18px;
        font-family: Lato;
    }

    .right {
        text-align: right;
    }

    .images {
        height: 100%;
        position: relative;
    }

        .images img {
            height: 50%;
        }

    .images20 img {
        height: 10%;
    }
</style>

<div class="column img">
    <div class="images right">
        <img src="img.jpg" />
    </div>
</div>


<div class="column img">
    <div class="images20 right">
        <img src="img.jpg" />
    </div>
</div>

<style type="text/css">
    .row {
        display: table-row;
        width: 100%;
    }

    .column {
        display: table-cell;
        height: 100%;
        position: relative;
    }

    .img {
        width: 22%;
    }

    .txt {
        width: 50%;
        vertical-align: middle;
    }

    .text p {
        width: 90%;
        margin: 10px auto;
        line-height: 1.5;
        white-space: pre-wrap;
        font-size: 18px;
        font-family: Lato;
    }

    .right {
        text-align: right;
    }

    .images {
        height: 100%;
        position: relative;
    }

        .images img {
            height: 50%;
        }

    .images20 img {
        height: 20%;
    }
    /* 50% */
</style>

<div class="column img">
    <div class="images right">
        <img src="http://2.179.254.185/images/button/signout.png" />
    </div>
</div>


<div class="column img">
    <div class="images20 right">
        <img src="http://2.179.254.185/images/button/signout.png" />
    </div>
</div>