image en div ne change pas de taille pour s'adapter écran de taille différente

Question

Im actuellement en train de concevoir un site Web pour un ami, bien sûr que son site Web soit multi-plateforme, j'ai le code suivant inclus afin que les éléments de l'écran changent en conséquence

 * { 
      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%;} 
    } 

etc un pour le bureau aussi.

Et cela fonctionne pour tous mes autres éléments, mais la difficulté se pose lorsque je tente de mettre une image dans un div. L'image apparaît mais très petite comme la taille du pouce. Dans un premier temps j'utilisais

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

maintenant im en utilisant le code ci-dessous et son même se produisant problème, une image de la taille du pouce 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> 

avec cela dans le 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"> 

mais rien ne fonctionne.

Merci pour votre aide à l'avance.

Answer 1

Vous pouvez ajouter cette image en arrière-plan pour la div

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

Ou si vous le voulez dans une ligne, faire comme ceci:

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