background-image css không hiển thị trong thẻ img

Question

Những hình ảnh nhạy trong html bootstrap của tôi không hiển thị:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <img class="myimg img-responsive"/> 
     </div> 
    </div> 
</div> 

css

.myimg { 
    background-image: url("http://images.wikia.com/worldlanguages/images/6/63/Wikipedia-logo.png"); 
    display:block; 
    height:100%; 
    width:100%; 
} 

jsfiddle demo

<img src="..."> sẽ làm việc, nhưng tôi cần phải xác định hình ảnh trong css.

This similar thread đề xuất sử dụng <div> và xóa dấu ngoặc kép trong url(), nhưng điều này không hữu ích.

Tại sao nó không hiển thị?

Answer 1

Bạn cần phải thiết lập chiều cao cho tất cả các bậc phụ huynh, và bạn cần background-size: cover

(Demo)

html, body { 
    height: 100%; 
} 
.container { 
    height: 100%; 
} 
.row, 
.col-sm-12 { 
    height: 100%; 
} 
.myimg { 
    background-image: url("//lorempixel.com/200/200"); 
    background-size: cover; 
    display: block; 
    height:100%; 
    width:100%; 
} 
.myimg2 { 
    background-image: url("//lorempixel.com/200/200"); 
    background-size: cover; 
    display: block; 
    height:100%; 
    width:100%; 
} 
.myimg3 { 
    background-image: url("//lorempixel.com/200/200"); 
    background-size: cover; 
    display: block; 
    height:100%; 
    width:100%; 
} 

Nếu bạn muốn một cách đáp ứng thay đổi hình nền, bạn có thể làm như vậy.

(Demo)

html, body { 
    height: 100%; 
} 
.container { 
    height: 100%; 
} 
.row, 
.col-sm-12 { 
    height: 100%; 
} 
.myimg, .myimg2, .myimg3 { 
    background-size: cover; 
    display: block; 
    height:100%; 
    width:100%; 
} 
@media (max-width: 500px) { 
    .myimg { 
     background-image: url("//lorempixel.com/500/500/cats"); 
    } 
    .myimg2 { 
     background-image: url("//lorempixel.com/500/500/business"); 
    } 
    .myimg3 { 
     background-image: url("//lorempixel.com/500/500/transportation"); 
    } 
} 
@media (max-width: 750px) { 
    .myimg, .myimg2, .myimg3 { 
    .myimg { 
     background-image: url("//lorempixel.com/750/750/cats"); 
    } 
    .myimg2 { 
     background-image: url("//lorempixel.com/750/750/business"); 
    } 
    .myimg3 { 
     background-image: url("//lorempixel.com/750/750/transportation"); 
    } 
    } 
} 
@media (max-width: 1000px) { 
    .myimg { 
     background-image: url("//lorempixel.com/1000/1000/cats"); 
    } 
    .myimg2 { 
     background-image: url("//lorempixel.com/1000/1000/business"); 
    } 
    .myimg3 { 
     background-image: url("//lorempixel.com/1000/1000/transportation"); 
    } 
} 

Answer 2

Bạn không thể đặt src ảnh qua css. Bạn phải biến img thành một khối và thiết lập chiều rộng/chiều cao thích hợp để hiển thị nền. Tuy nhiên, có vẻ hơi lạ đối với tôi. Bạn nên làm điều đó trên div:

<div class="myimg">   
</div> 


.myimg { 
    width: 100px; // change to your background width 
    height: 100px // change to your background height 
    background: url('path/to/img'); 
}