画像の幅がdivを超えているため、元のサイズを変えずに画像が中央に表示されるようにcssで制御しており、divを超えた部分の画像はhidden_​​html/css_WEB-ITnoseとなっています

コードは次のとおりです:

要件は記載の通り
説明は以下の通り以下の図 1 には写真が含まれていません 効果、写真 2 は写真を追加した後の効果、写真 3 は元の写真、写真 4 は希望の効果です、助けてください、ありがとう



写真 1


写真 2


写真 3



図 4








ディスカッションへの返信 (解決策)

図 4 の効果が欲しい場合、あなたのニーズは非常に奇妙です。それは、画像の高さが完全に表示されない場合）、次のコードでそれを満たすことができます。

#tt {background-color:#FF0000;margin: auto;width: 100%;height:400px;overflow: hidden;   /* 添加的 */}

通常の状況では、幅は画面に合わせて調整する必要があり、高さは幅に比例して変化する必要があります。つまり、画像の幅と高さが比例して変化します。たとえば、アクティブなページの div の img の幅が 1920 である場合、要件はブラウザの解像度が 1024 であることです。画像は幅 1024 で中央に表示され、ブラウザの解像度が 1400 の場合、画像は幅 1400 で中央に表示され、それを超える部分は非表示になります。両側が隠れてしまいます。
これには jquery を記述し、その div の幅を取得し、この幅の値を img に割り当て、スコア用に overflow: hidden in img を CSS に追加する必要があります

上の階のマスターはコードを持っていますか？

たまたまコードを持っているので、私に連絡して、私のメールボックスにプライベートメッセージを送って、あなたに送ってください

そうですか

アイデアは変更できます、div に画像を入れず、背景を使用してください-size を div: カバーの背景画像として使用すると、絶対的なセンタリングを実現でき、div の幅と高さを再調整する必要があるという制限も取り除くことができます

画像のサイズは同じままですか? img を 100% に設定すると、外側の div の幅に応じて常に変化します。これは中央揃えの効果です。画像の幅が 1920px のままであれば、背景画像にする上記の方法が可能です。