画像の向きに応じて画像の高さや幅を調整しますか？

Question

私は画像のリストを持っている必要があります、私は画像のサイズを知らない、いくつかの風景、いくつかの肖像画になる可能性があります。

親の横幅が100％、横幅が100％の横幅に合っている必要があります。

イメージが横または縦のサーバー側であり、関連するクラスを追加すると、幅が100％または100％になる唯一の方法があります。

オブジェクトフィットや背景イメージを使用せずに、アスペクト比を維持する方法はありますか？

Answer 1

私が正しく理解していれば、これはうまくいくはずです。

jsFiddle

<li class="container"> 
    <div class="landscape"> 

    </div> 
</li> 
<li class="container"> 
    <div class="portrait"> 

    </div> 
</li> 


.landscape { 
    background-image:url("http://www.thelogofactory.com/wp-content/uploads/2015/09/fixed-google-logo-font.png"); 
    width: 100%; 
    height: 100%; 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

.portrait { 
    background-image:url("https://developers.google.com/safe-browsing/images/SafeBrowsing_Icon.png"); 
    width: 100%; 
height: 100%; 
background-size: contain; 
background-repeat: no-repeat; 
} 

.container { 
width: 100px; 
height: 100px; 
} 

あなたは、IMGタグの代わりにdivを使用することができます。

Answer 2

画像にはmax-heightとmax-widthを使用してください。小さな画像がきれいに見えるように、それらを中心にすることもできます。私の知っていることを

ul { 
 
    margin: 0; 
 
    padding: 20px; 
 
    list-style: none; 
 
    } 
 
li { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    border: 1px dashed red; 
 
    margin: 0 20px 20px 0; 
 
    } 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    }

<ul> 
 
    <li><img src="https://pixabay.com/static/uploads/photo/2015/02/08/20/57/man-629062_960_720.jpg" alt=""></li> 
 
    <li><img src="https://pixabay.com/static/uploads/photo/2016/01/08/15/21/man-1128277_960_720.jpg" alt=""></li> 
 
</ul>