画像のカバーdivの倍率とアスペクト比の保持

Question

画像をラッパーの内側に入れようとしていて、ブラウザウィンドウで画像を拡大/縮小したいとします。画像はではなく、の背景画像ですが、インライン<img>要素です。

私は何をしていますが、100％の高さにすることができます。幅が短くなることがあります。私は画像が画像そのものより大きくても（画像はゆがんだ/ズームインされる）、画像を常に中心にして、画像を幅の100％に強制したい。したがって、画像はラッパー全体を占有し、必要に応じて画像を拡大し、ブラウザウィンドウで拡大/縮小します。

（あなたがフルウィンドウでスニペットを開くことによって、より良い、それを見ることができます）

ul.archive-list > li { 
 
    display: block; 
 
} 
 
ul.archive-list > li { 
 
    padding: 0 20px; 
 
    width: 25%; 
 
    float: left; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-bottom: 40px; 
 
} 
 
ul.archive-list .archive-img-wrap { 
 
    height: 200px; 
 
    display: block; 
 
    overflow: hidden; 
 
    border-radius: 8px; 
 
    display: flex; 
 
    justify-content: center; 
 
    background: red; 
 
} 
 
ul.archive-list img.archive-img { 
 
    width: auto; 
 
    max-height: 200px; 
 
} 
 
ul.archive-list h1.archive-title { 
 
    margin: 25px 0 0 0; 
 
    font-size: 1.2em; 
 
    color: #535353; 
 
}

<ul class="archive-list"> 
 
    <li> 
 
    <article> 
 
     <a href="#article" title="Article Title"> 
 
     <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span> 
 
     <h1 class="archive-title">The Amazing Article Title is Shown Here</h1> 
 
     </a> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <a href="#article" title="Article Title"> 
 
     <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span> 
 
     <h1 class="archive-title">The Amazing Article Title is Shown Here</h1> 
 
     </a> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <a href="#article" title="Article Title"> 
 
     <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span> 
 
     <h1 class="archive-title">The Amazing Article Title is Shown Here</h1> 
 
     </a> 
 
    </article> 
 
    </li> 
 
</ul>

Answer 1

あなたはobject-fitを使用することができ、ちょうど現在、IEでのサポートやエッジがないことに注意してください。

img { 
    min-width: 100%; 
    min-height: 100%; 
    object-fit: cover; 
} 

jsFiddle

---

Javascriptをpolyfills：

• https://github.com/anselmh/object-fit
• https://github.com/bfred-it/object-fit-images
• https://github.com/tonipinel/object-fit-polyfill
• https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.be199342j

Answer 2

あなたのCSSあなたが今使っているとして、実際にトリックを行います。問題は、画像の高さがul.archive-list .archive-img-wrapで制限されていることです。

このクラスからheight: 200px;を削除すると、画像は縦横比を維持したまま拡大縮小されます。

Answer 3

spanあなたは、コンテナのようにそれtable-cell作り、vertical-alignとtext-alignを使用することができ、flexコンテナである必要はありません。あなたはmax-heightとmax-widthがmin-heightとmin-widthにtutnすることができ、その後、それがオーバーフローする場合を除き、

画像もmax-width:100%;が必要になる場合があります。

ul.archive-list > li { 
 
    display: block; 
 
} 
 
ul.archive-list > li { 
 
    padding: 0 20px; 
 
    width: 25%; 
 
    float: left; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-bottom: 40px; 
 
} 
 
ul.archive-list .archive-img-wrap { 
 
    height: 200px; 
 
    display: block; 
 
    overflow: hidden; 
 
    border-radius: 8px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    background: red; 
 
} 
 
ul.archive-list img.archive-img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
ul.archive-list h1.archive-title { 
 
    margin: 25px 0 0 0; 
 
    font-size: 1.2em; 
 
    color: #535353; 
 
}

<ul class="archive-list"> 
 
    <li> 
 
    <article> 
 
     <a href="#article" title="Article Title"> 
 
     <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span> 
 
     <h1 class="archive-title">The Amazing Article Title is Shown Here</h1> 
 
     </a> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <a href="#article" title="Article Title"> 
 
     <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span> 
 
     <h1 class="archive-title">The Amazing Article Title is Shown Here</h1> 
 
     </a> 
 
    </article> 
 
    </li> 
 
    <li> 
 
    <article> 
 
     <a href="#article" title="Article Title"> 
 
     <span class="archive-img-wrap"><img class="archive-img" src="https://i.imgur.com/2MAsv6e.jpg" alt="Article Title" /></span> 
 
     <h1 class="archive-title">The Amazing Article Title is Shown Here</h1> 
 
     </a> 
 
    </article> 
 
    </li> 
 
</ul>