パーフェクトイメージコンテナ：中央、アスペクト比、シャンクと盛り上がりフィット

Question

ここからotherquestionsここにあるので、私はアスペクト比をイメージに維持して、水平方向と垂直方向の両方にコンテナに収めることができるようになります容器に収まるように収縮させる。ほぼそこに！

どういうところが間違っていますか？小さな画像を展開したい場合は、<img>タグにクラスを追加することができます。つまり、小さな画像を展開する機能をオフにする場合は<img class="nogrow" ... />です。

JSBin

.parent { 
 
    width: 240px; 
 
    height: 160px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
} 
 

 
.img-container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 

 
    text-align:center; 
 
    font: 0/0 a; 
 
} 
 

 
.img-container .centerer { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
} 
 

 
.img-container img { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<table> 
 
<thead> 
 
    <th>Actual</th> 
 
    <th>Expected</th> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/1000x500" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/1000x500" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/500x600" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/500x600" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/50x60" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/50x60" alt="" height="100%" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/100x50" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img src="http://placehold.it/100x50" alt="" width="100%" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">With ".nogrow"</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/1000x500" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/1000x500" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/500x600" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/500x600" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/50x60" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/50x60" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/100x50" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="parent"> 
 
     <div class="img-container"> 
 
      <div class="centerer"></div> 
 
      <img class="nogrow" src="http://placehold.it/100x50" alt="" /> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</tbody> 
 
</table>

Answer 1

object-fit: containを試してみてください（と.nogrowためnoneまたはscale-down）。 divを一切必要としないでください。イメージの寸法を100％100％に設定するだけです。少しJSで

<!DOCTYPE html> 
<style> 
td { width:240px; height:160px; border:1px solid } 
img { width:100%; height:100%; object-fit:contain; display:block } 
.nogrow { object-fit:scale-down } 
</style> 
<table> 
<tr><td><img src="http://placehold.it/1000x500" alt=""> 
<tr><td><img src="http://placehold.it/500x600" alt=""> 
<tr><td><img src="http://placehold.it/50x60" alt=""> 
<tr><td><img src="http://placehold.it/100x50" alt=""> 
<tr><th>With ".nogrow" 
<tr><td><img class="nogrow" src="http://placehold.it/50x60" alt=""> 
<tr><td><img class="nogrow" src="http://placehold.it/100x50" alt=""> 
</table> 

• http://caniuse.com/#search=object-fit
• https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• https://drafts.csswg.org/css-images/#the-object-fit