孩子不考虑整个维度

Question

我有一个问题，即使我将宽度和高度设为100％，如下面的代码所示，使得div div占据整个宽度和高度

<div id="images_rows">
    <div class="img_item"><div><span>Gone Fishing</span></div></div>
    <div class="img_item"><div><span>By the sea</span></div></div>
    <div class="img_item"><div><span>The great valley</span></div></div>
    <div class="img_item"><div><span>A night to remember</span></div></div>
    <div class="img_item"><div><span>On the lake</span></div></div>
    <div class="img_item"><div><span>On the mountains</span></div></div>
    <div class="img_item"><div><span>Take a flight</span></div></div>
    <div class="img_item"><div><span>going to the forest</span></div></div>
</div>

CSS如下：

div#images_rows {
    font-size: 0;
}
div.img_item {
    width: 25%;
    min-width: 250px;
    max-width: 799px;
    margin:0;
    height: 270px;
    display: inline-block;
    position: relative;
}
div.img_item > div {
    width: 100%;
    height: 100%;
    display: table;
    background-color: rgba(85, 85, 85, 0.5);
    color: #fff;
    font-family: lovelo;
    text-align: center;
    transition: 200ms cubic-bezier(0.15,0.75,0.5,1);
    cursor: pointer;
}
div.img_item > div:hover {
    background-color: rgba(85, 85, 85, 0);
    background-size: 110%;
}
div.img_item > div > span {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px !important;
}

这就是我所拥有的神器：

这是浏览器中的结果，如inspect元素所示：

• 这是父div：

• 这就是孩子div：

正如我们所看到的那样，由于父div的百分比样式存在一些浮动数字，而且孩子不会将整个宽度取为浮动数字而留下未覆盖的空间

有什么想法可以解决这个问题吗？