如何使DIV的背景圖像具有響應性？

Question

.article_left_bg { 
    background-image: url(images/article_bg_01.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 400px; 
    margin-left: 20px; 

} 

.article_left2_bg { 
    background-image: url(images/article_bg_03.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 320px; 
    margin-left: 12px; 
    margin-top: -30px; 
} 

.article_left3_bg { 
    background-image: url(images/article_bg_05.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 400px; 
    margin-left: 8px; 
    margin-top: -15px; 
} 

.article_right_bg { 
    background-image: url(images/article_bg_02.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 400px; 

} 

.article_right2_bg { 
    background-image: url(images/article_bg_04.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 320px; 
    margin-top: -30px; 
} 

.article_right3_bg { 
    background-image: url(images/article_bg_06.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 320px; 
    margin-top: -15px; 
} 

.article_title, .article_title1, .article_title2 { 
    width: 350px; 
    padding-bottom:15px; 
    margin-bottom:15px; 
    } 

.article_title h2 { 
    margin:20px 0 5px 0; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    padding: 50px 0 0 58px; 
    } 

.article_title1 h2 { 
    margin:20px 0 5px 0; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    padding: 90px 0 0 58px; 
    } 

.article_title2 h2 { 
    margin:20px 0 5px 0; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    padding: 60px 0 0 68px; 
    } 


.article_title h2 a, .article_title1 h2 a, .article_title2 h2 a{ 
    color:#000} 


.article_title .subtitle, .article_title1 .subtitle { 
    display:block; 
    font-size:15px; 
    font-weight:300; 
    color:#000; 
    padding: 0 0 0 58px; 
    } 

.article_title2 .subtitle { 
    display:block; 
    font-size:15px; 
    font-weight:300; 
    color:#000; 
    padding: 0 0 0 68px; 

} 

.article_descr { 
    width: 290px; 
    color:#000; 
    font-size:12px; 
    line-height:1.2em; 
    font-family:Arial, Helvetica, sans-serif; 
    padding: 0 0 0 58px; 
    } 

.article_item .link_more, 
.article_item .link_more:hover { 
    display:inline-block; 
    line-height:25px; 
    background:url(images/arrow_right.png) 0 0 no-repeat; 
    padding-left:45px; 
    font-weight:400; 
    font-size:18px; 
    color:#000;} 

我想要3行2列每個盒子都有不同的圖像作爲背景。但是，當涉及到移動時，它正在破裂。 IMage只顯示一半的部分，並且文字從圖像中傳出。

我會請求任何人都應該幫我做一個敏感的div背景圖片。

感謝

TeekeyBee

Answer 1

是否background-size: cover;幫你呢？

background-size CSS屬性指定背景圖像的大小。圖像的大小可以完全限制或僅部分地保留其內在比例。

Here有關它的更多信息。