画像の幅を広げるにはどうすればいいですか？

Question

自然な200px幅で画像が伸びないようにするにはどうすればよいですか？

footer { 
 
    display: flex; 
 
} 
 
img { 
 
    flex: 1; 
 
    margin: 1em; 
 
}

<footer> 
 
    <img src=http://www.placebacon.net/200/150> 
 
</footer>

Answer 1

は画像の外フレックスを取り、 max-widthを100％に設定します。これにより、イメージが最大サイズに拡大し、親が縮小する場合に縮小されます。次に、align-items：flex-startをコンテナに追加します。これにより、アスペクト比が縮小してもそのまま維持されます。

footer { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
img { 
 
    margin: 1em; 
 
    max-width: 100%; 
 
}

<footer> 
 
    <img src=http://www.placebacon.net/200/150> 
 
</footer>

Answer 2

あなたは単純なコンテナにそれを投げるし、屈曲のためにそれを使用することができます。

<footer> 
    <div> 
    <img src=http://www.placebacon.net/200/150> 
    </div> 
</footer> 

footer { 
    display: flex; 
} 
div { 
    flex: 1; 
    margin: 1em; 
} 
img { 
    max-width: 100%; 
}