CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するという記事を見たので、それを録画して共有しました。

1. 画像の幅または高さをコンテナの幅または高さと同じにし、余分な部分を切り取って、画像を中央に配置します。

<スタイル タイプ="text/css">
div{
    幅: 200ピクセル;
    高さ: 200px;
    オーバーフロー: 非表示;
    境界線: 2px 実線の赤;
    位置: 相対的;
}
画像{
    幅: 100%;
    位置: 絶対;
 上位: 50%;
 左: 50%;
 変換: translate(-50%, -50%); 
}
</スタイル>
<div>
    <img src="1.png">
</div>
<br>
<div>
    <img src="1.jpg">
</div>

効果画像:

画像の幅が制限されていて、高さがコンテナの高さ以上である場合、コンテナ全体を埋め尽くします。ただし、画像の高さがコンテナの高さより小さい場合は、空白スペースが表示されます。高さが固定されている場合も同様です。この方法は最もシンプルで実用的であり、背景カットと組み合わせるとさらに完璧になります。

2. 画像が常にコンテナ内に中央に表示されていることを確認します。この方法は画像を切り取らないため、上記の方法のアップグレード版と言えます。

<スタイル タイプ="text/css">
div{
    幅: 200ピクセル;
    高さ: 200px;
    境界線: 2px 実線の赤;
    位置: 相対的;
}
画像{
    最大幅: 100%;
    最大高さ: 100%;
    位置: 絶対;
 上位: 50%;
 左: 50%;
 変換: translate(-50%, -50%); 
}
</スタイル>
<div>
    <img src="1.png">
</div>
<br>
<div>
    <img src="1.jpg">
</div>

効果図は以下のとおりです。

幅がコンテナを超えている場合でも、高さがコンテナを超えている場合でも、幅と高さがコンテナを超えていない場合でも、切り取られることなくすべてコンテナの中央に表示できることがわかります。

3. 画像を背景にします。背景サイズを変更することで、コンテナに表示される画像の効果を任意に変更できます。操作は最も便利です:

<スタイル タイプ="text/css">
div{
    幅: 200ピクセル;
    高さ: 200px;
    境界線: 2px 実線の赤;
    背景繰り返し: 繰り返しなし;
    背景の位置: 中央;
    背景サイズ: カバー;
}
</スタイル>
<div style="background-image: url(1.jpg);"></div>

効果図は以下のとおりです。

上の図の背景サイズを変更すると、方法 1 と方法 2 の両方を簡単に実装できることがわかります。さらに、最後のカバー効果は最も理想的です。つまり、中央に表示され、コンテナー全体を満たし、変形しません。 SEO を考慮しない場合でも、この方法は非常に簡単に使用できます。ただし、情報サイトや写真展などの場合は、この方法を使用しないでください。そうしないと、写真が検索エンジンに含まれることが難しくなります。

4. SEOを考慮しながら3番目の方法の効果を実現できる方法があれば素晴らしいと思います。ここで紹介するのは、object-fit と object-position です。こう理解すると、object-position は background-position と同等であり、デフォルト値は 50% 50% で中央揃えとなるため、通常は記述されません。object-fit が追加されると、デフォルトで中央揃えになります。 object-fit は、画像の塗りつぶし方法である background-size と同等です (ここでは画像サイズではありません)。

<スタイル タイプ="text/css">
div{
    幅: 200ピクセル;
    高さ: 200px;
    境界線: 2px 実線の赤;
}
画像{
    幅: 100%;
    高さ: 100%;
    オブジェクトフィット: カバー;
}
</スタイル>
<div>
    <img src="1.jpg">
</div>

効果図は以下のとおりです。

上の写真から、結果は背景方法で設定された効果とほぼ同じであることがわかります。これは背景方式のレプリカとも言え、背景画像が検索エンジンに含まれないというデメリットも回避できます。 IE の互換性を考慮しないのであれば、この方法を使用してみてはいかがでしょうか?お母さんは、編集者がランダムに写真をアップロードすることを心配する必要がなくなりました。

注意: 画像には幅と高さを設定する必要があります。そうしないと、object-fit は無効になります。画像をコンテナと同じ幅と高さに設定するだけです。コンテナをオーバーフローさせて非表示に設定する必要はなく、object-fit によって画像の幅と高さを超える部分が自動的に非表示になります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。