html - Comment puis-je auto-réaliser une image pour correspondre à un conteneur 39;divέ#39

Mots clés : htmlcssimageautoresizehtml

meilleur 5 Réponses html - Comment puis-je auto-réaliser une image pour correspondre à un conteneur 39;divέ#39

vote vote

99

max-width:100%; max-height:100%; 
img {      max-width: 100%;      max-height: 100%;  }    .portrait {      height: 80px;      width: 30px;  }    .landscape {      height: 30px;      width: 80px;  }    .square {      height: 75px;      width: 75px;  }
Portrait Div  <div class="portrait">      <img src="http://i.stack.imgur.com/xkF9Q.jpg">  </div>    Landscape Div  <div class="landscape">      <img src="http://i.stack.imgur.com/xkF9Q.jpg">  </div>    Square Div  <div class="square">      <img src="http://i.stack.imgur.com/xkF9Q.jpg">  </div>
vote vote

86

<img style='height: 100%; width: 100%; object-fit: contain'/> 
vote vote

70

height width viewbox 
vote vote

62

<div id="myDiv">   <img alt="Client Logo" title="Client Logo" src="Imagelocation" /> </div> 
#myDiv {   height: 104px;   width: 140px; } #myDiv img {   max-width: 100%;   max-height: 100%;   margin: auto;   display: block; } 
var logoHeight = $('#myDiv img').height();     if (logoHeight < 104) {         var margintop = (104 - logoHeight) / 2;         $('#myDiv img').css('margin-top', margintop);     } 
vote vote

53

<div style="height: 250px">      <img src="..." alt=" " style="width: 100%;max-height: 100%" /> </div> 

Questions similaires