html - 为什么这个带有表格单元格内背景图像的 div 根本不显示？

Question

JSFiddle.

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

---

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

---

我还尝试使用内联 img 元素而不是带有 background-image 的 div，但这会导致灾难。 <强> 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

完整的解决方案(图像右对齐):

.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/