自然な200px幅で画像が伸びないようにするにはどうすればよいですか?画像の幅を広げるにはどうすればいいですか?
footer {
display: flex;
}
img {
flex: 1;
margin: 1em;
}
<footer>
<img src=http://www.placebacon.net/200/150>
</footer>
自然な200px幅で画像が伸びないようにするにはどうすればよいですか?画像の幅を広げるにはどうすればいいですか?
footer {
display: flex;
}
img {
flex: 1;
margin: 1em;
}
<footer>
<img src=http://www.placebacon.net/200/150>
</footer>
は画像の外フレックスを取り、 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>
あなたは単純なコンテナにそれを投げるし、屈曲のためにそれを使用することができます。
<footer>
<div>
<img src=http://www.placebacon.net/200/150>
</div>
</footer>
footer {
display: flex;
}
div {
flex: 1;
margin: 1em;
}
img {
max-width: 100%;
}
余分なdivの必要はありません。私はブライアンの答えが好きです。 – hendry
imgタグのフレックスプロパティを削除してください。 – vivek
答えはありませんが、すべてのHTML属性を引用符で囲むことをお勧めします。技術的にはスラッシュでタグを閉じます。だから、 – petryuno1
どういう意味ですか? imgを100%に設定します。 ? – Fiido93