画像が div より大きい場合に CSS を使用して中央に配置する方法 (コード例)

この記事では、CSSを使って画像がdivより大きい場合に中央揃えで表示する方法を紹介します（コード例）。必要な方は参考にしていただければ幸いです。あなたに役立ちます。

画像がpより大きい場合、画像を縮小すると画像がp全体に表示されないことがあります。画像の高さを調整するには、外側の p を overflow:hidden に設定します。このとき、外側の p を水平方向と垂直方向の中央に設定しても、画像は中央に配置されません。

解決策:

1- 画像を背景画像として設定します

<div class="face-img-contain" id="face-img-back">
 </div>

.face-img-contain{
    width:348px;
    height:436px;
    margin:0 auto;
    margin-top: 14px;
    position: relative;
    background-image: url(../images/face-img/test-22.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gainsboro;
}

若是后台返回的地址，别忘了拼接方法正确
$("#face-img-back").css("background-image","url("+faceImg+")");

2- 画像の幅と高さを p の 100% に対して設定し、object-fit:cover Helped を設定します。関連チュートリアルの詳細については、
CSS 基本ビデオ チュートリアル

をご覧ください。

関連する推奨事項:

CSS オンライン マニュアル

##div/css グラフィック チュートリアル

#

以上が画像が div より大きい場合に CSS を使用して中央に配置する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。