圖像，以適應不同大小的屏幕

Question

即時通訊目前正試圖設計一個網站的朋友，當然它是一個跨平臺的網站，我已經包括下面的代碼，使屏幕內容也會隨之改變大小

 * { 
      box-sizing: border-box; 
      } 
     .row::after { 
     content: ""; 
      clear: both; 
      display: block; 
} 
[class*="col-"] { 
    float: left; 
    padding: 15px; 
} 
/* For mobile phones: */ 
[class*="col-"] { 
    width: 100%; 
} 
@media only screen and (min-width: 600px) { 
    /* For tablets: */ 
    .col-m-1 {width: 8.33%;} 
    .col-m-2 {width: 16.66%;} 
    .col-m-3 {width: 25%;} 
    .col-m-4 {width: 33.33%;} 
    .col-m-5 {width: 41.66%;} 
    .col-m-6 {width: 50%;} 
    .col-m-7 {width: 58.33%;} 
     .col-m-8 {width: 66.66%;} 
     .col-m-9 {width: 75%;} 
     .col-m-10 {width: 83.33%;} 
     .col-m-11 {width: 91.66%;} 
     .col-m-12 {width: 100%;} 
    } 

等一個桌面了。

而且它適合我的所有其他元素，但在出現困難時，我嘗試把圖像在一個div。圖像顯示出來，但像拇指大小一樣非常小。起初，我用

max-height:100%; max-width:100%; 

現在即時通訊使用下面的代碼和它同樣的問題發生的歷史，一個拇指大小的圖像 HTML

<div class="header"> 
    <div id="container"> 
    <img src="D:\kWebsite\images\websize\cakeA.jpg" alt="cake" /> 
    </div> 

<h1>food</h1> 
</div> 
    <script type="text/javascript"> 
    (function() { 

var img = document.getElementById('container').firstChild; 
img.onload = function() { 
    if(img.height > img.width) { 
     img.height = '1000%'; 
     img.width = 'auto'; 
    } 
}; 

}()); 
</script> 

這個在CSS

#container { 
    width: 48px; 
    height: 48px; 
} 

#container img { 
    width: 100%; 
max-width:100%; 
} 

I do have the viewport in my html 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

但沒有用。

感謝您的幫助提前。

Answer 1

您可以爲背景添加圖像到div

#container { 
    background-image: url("D:\kWebsite\images\websize\cakeA.jpg"); 
    background-size: contain; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

或者，如果你想在一個行，像這樣做：

#container { 
    background: rgba(0, 0, 0, 0) url("D:\kWebsite\images\websize\cakeA.jpg") no-repeat scroll center center/contain; 
}