background-sizeを使わずにdivに比例して塗りつぶす画像：coverまたはobject-fit：cover

Question

私は、アスペクト比を維持しながらdivで塗りつぶしています。しかしbackground-size：coverで背景画像を使用したり、object-fit：coverプロパティを使用したりするのではなく、imgタグを使用してその結果を得たいと思います。

object-fit：coverまたはbackground-size：coverを使用せずに以下のコードでわかるように、画像が伸びていて、これは私が望む結果ではありません。画像の下のコードで

.post-thumbnail { 
 
    width: 352px; 
 
    height: 240px; 
 
    overflow: hidden; 
 
} 
 

 
.post-thumbnail img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="post-thumbnail"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M"> 
 
</div>

、フィットオブジェクトによる伸びていません：カバー、それは良いの互換性を持っていないので、私は、このプロパティを使用しなくても、これと同じ結果が欲しいです。誰も私はこれを行うことができます知っていますか？

.post-thumbnail { 
 
    width: 352px; 
 
    height: 240px; 
 
    overflow: hidden; 
 
} 
 

 
.post-thumbnail img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div class="post-thumbnail"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M"> 
 
</div>

Answer 1

あなたは、あなたがあなたのページを伸ばしているそのようにheightプロパティとwidthプロパティを設定しています。あなたが1つだけを設定すると、もう1つはそれと共に縮尺されます。あなたが持っている写真の種類や好みに応じて、高さと幅を設定する必要があります。

Answer 2

ます（クリップを使用することができる）+位置：絶対、又は垂直整列およびテキスト整列に沿って負のマージンを使用する：

.post-thumbnail { 
 
    display:inline-block; 
 
    width: 352px; 
 
    height: 240px; 
 
          line-height:240px; 
 
          text-align:center; 
 
    overflow: hidden; 
 
} 
 
.post-thumbnail.small { 
 
    width: 40px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
} 
 

 
.post-thumbnail img { 
 
          min-width: 100%; 
 
          min-height: 100%; 
 
          vertical-align:middle; 
 
          margin:-500px; 
 
} 
 

 
/* demo purpose to show what is being hidden;*/ 
 
.post-thumbnail { 
 
    margin:50px; 
 
    overflow: visible; 
 
    box-shadow:0 0 0 50px rgba(200,200,200,0.5); 
 
    border:solid blue; 
 
} 
 

 
.post-thumbnail img { 
 
    position:relative; 
 
    z-index:-1; 
 
}

<div class="post-thumbnail"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M"> 
 
</div> 
 
<div class="post-thumbnail small"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKh0q0NzNKTmUA9q-uxaJIRx3pNYgbqzEdGW1cXFdIlZ_SlV-M"> 
 
</div>