向分部類添加響應背景圖像引導

Question

我必須在圖像內部使用JavaScript函數。因此，我想將圖像添加爲分區類中的背景圖像。我希望它具有響應性和可伸縮性比如我使用的<img>標籤。這怎麼能實現？

Answer 1

CSS3 背景大小可以在這裏使用。

background-size: [auto|percentage|units - for width] [auto|percentage|units - for height]; 

例如：

.bg{ 
    /*will stretch the element's background to its full width (saving proportions of the picture - so it may be cut vertically or not fill the entire height):*/ 
    background-size:100% auto; 

    /*will stretch the element's background to its full height (it may be cut - this time - horizontally or not fill the entire width):*/ 
    background-size:auto 100%; 

    /* the background will be forced to the 50% of the el's width and 40% of its height respectively: */ 
    background-size:50% 40%; 
}