要素がブラウザの横幅を超えたときに左右均等に見切れさせたいスタイル

通常、要素がブラウザの横幅からはみ出すと右からきれるんですが、縮めたときにも左右均等にはみ出させたいスタイル

よく忘れる自身のためにも書きました。

まず普通の状態

html

<body>
    <div id="wrap">
        <img src="./demo_photo.jpg" alt="デモ用画像" />
    </div>
</body>

<body>

</div>

</body>

css

body{
    margin: 0;
}
#wrap{
    overflow-x: hidden;		
}
img{
    width: 1920px;
    height: 500px;
}

body{

margin: 0;

}

#wrap{

overflow-x: hidden;

}

img{

width: 1920px;

height: 500px;

}

横のスクロールバーを出したくないのでoverflow-xを指定しています。出てもいいのであればもちろん指定しなくてもかまいません。

次に左右均等に見きれさせたパターン

左右均等見きれのサンプル

htmlは同じなので割愛

css

body{
    margin: 0;
}
#wrap{
    height: 500px;
    position: relative;
    overflow-x: hidden;		
}
img{
    width: 1920px;
    height: 500px;
    margin-left: -960px;
    position: absolute;
    left: 50%;
}

body{

margin: 0;

}

#wrap{

height: 500px;

position: relative;

overflow-x: hidden;

}

img{

width: 1920px;

height: 500px;

margin-left: -960px;

position: absolute;

left: 50%;

}

親要素にposition: relative、子要素にposition: absolute、left: 50%と自身の横幅の半分の値のネガティブマージンを設定します。
overflow-x: hiddenを指定するときは親要素の高さを指定しないと要素が隠れてしまいます。