横幅を200pxに指定しただけの場合
よく使いますが、高さがバラバラになるので、加工をしないと綺麗に配置できません。
<img width="200" src="/img/demo/femail/003.jpg">縦と横を指定しただけの場合
高さを揃えたいあまりに、無理やり広げるので綺麗ではないですね。
<img class="demo_none" src="/img/demo/femail/003.jpg">
<style>
img.demo_none {
width: 200px;
height: 200px;
}
</style>比率はそのままで埋める cover
元画像が横長なので、左右がカットされて中央にトリミングされます。複雑な設定をして表現していた人は大助かりですね。
<img class="demo_cover" src="/img/demo/femail/003.jpg">
<style>
img.demo_cover {
width: 200px;
height: 200px;
object-fit: cover;
}
</style>比率はそのままで埋める cover 0 100%
中央ではなく画像の左を開始位置したいとき使います。数値を変えれば好きな位置に変えられるので、大半のトリミングはこれでいけそうです。
<img class="demo_cover_pos" src="/img/demo/femail/003.jpg">
<style>
img.demo_cover_pos {
width: 200px;
height: 200px;
object-fit: cover;
object-position: 0 100%
}
</style>比率はそのままでできるだけ拡大する contain
せっかく準備した画像なので完全体で見せたい時はこれが良いです。高さも揃えられますが、背景色をつけないとガタガタして見えてしまうので気をつけましょう。
<img class="demo_contain" src="/img/demo/femail/003.jpg">
<style>
img.demo_contain {
width: 200px;
height: 200px;
object-fit: contain;
background-color:#BBB;
}
</style>比率を無視して縦と横を埋める fill
これは縦横固定と変わりませんが、意図的に埋めたい時に使えるかもしれません。
<img class="demo_fill" src="/img/demo/femail/003.jpg">
<style>
img.demo_fill {
width: 200px;
height: 200px;
object-fit: fill;
}
</style>小さい方に合わせてはみ出さない scale-down
実は最後のこれがお勧めです。このサンプルは元画像が大きいのでわかりませんが、元画像が200x200より小さい場合、小さいままで表示します。画像が粗くなることを許したくないときはこの指定が良いでしょう。
<img class="demo_scale-down" src="/img/demo/femail/003.jpg">
<style>
img.demo_scale-down {
width: 200px;
height: 200px;
object-fit: scale-down;
background-color:#BBB;
}
</style>
