为什么这个 div 的 table 单元格内的背景图像根本不显示？

Question

为什么 .col-left-bg-image 根本不显示？

我刚刚意识到它没有显示，因为它里面没有任何内容。所以我通过将 ... 放入其中并给它一个 background-size:100% 100%（最初是 auto 100%）来检查。但结果是显示了带有 background-image 的 div，但它并不需要父级的 100% 的 height（即 .col-left）：s JSFiddle here

我还尝试使用内联 img 元素而不是 div 和 background-image，但这会导致灾难。 JSFiddle here.

@import url(<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet' type='text/css'>);
html, body {
    height: 100%;
    margin: 0;
}
.section-big { /* change the width/height here */
    height: 80%;
    width: 80%;
 margin:100px auto 25px;
}
.container {
    display: table;
    table-layout: fixed;
    margin: auto;
    height: 100%;
    width: 100%;
}
.col {
    display: table-cell;
    vertical-align: top;
    height: 100%;
}
.col-left-bg-image {
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: 100% 100%;
}

.col-left {
 padding:0px 25px;
}



.col h3, .col h5 {
    padding: 0;
    margin: 0;
}
.col section:nth-child(1) {
    height: 30%;
}
.col section:nth-child(2) {
    height: 22%;
}
.col section:nth-child(3) {
    height: 22%;
}
.col section:nth-child(4) {
    height: 26%;
}
.col section:nth-child(odd) {
    background: aqua;
}
.col section:nth-child(even) {
    background: lime;
}



h3 {
 color:#6c6969;
 transition:color 0.3s ease 0s;
 font-family:'Open Sans', sans-serif;
 font-weight:600;
 font-size:40px;
}

h5 {
 color:#6c6969;
 transition:color 0.3s ease 0s;
 font-family:'Open Sans', sans-serif;
 font-weight:400;
 font-size:20px;
}

<section class="section-big">
    <div class="container">
        <div class="col col-left">
   <div class="col-left-bg-image"></div>
            <!-- <img src="http://www.mediafire.com/convkey/9642/57q0fpdevvo1999zg.jpg?size_id=b" alt="Tun Tun!" /> -->
        </div>
        <div class="col col-right">
            <section class="section-one">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-two">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-three">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
            <section class="section-four">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </div>
    </div>
</section>

Answer 1

我只是将 'height: 100%' 添加到您的第二个 JSFiddle 中的 'col-left-bg-image' class，它似乎工作正常。 div 的 'background-size' 与 div 中图像的大小不同。图片会调整 div 的大小以适应它，而制作背景图片则不会 :D

JSFiddle Here!

.col-left-bg-image {
    height: 100%;
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: 100% 100%;
}

如果这不是你的意思，请告诉我:D

Answer 2

完整解决方案（图像右对齐）：

.col-left-bg-image {
    background: url("http://www.mediafire.com/convkey/7a01/xaagjmwa7yz1dgdzg.jpg?size_id=b") no-repeat;
    background-size: auto 100%;
    height: 100%;
    background-position: center right;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/tpu10dxu/7/

为什么这个 div 的 table 单元格内的背景图像根本不显示？

Why isn't this div with background-image inside table-cell displaying at all?

html

css

height

background-size