さまざまな画面サイズに合わせる必要がある Web サイトがあります。そのほとんどは非常に簡単ですが、画面サイズに合わせてサイズを変更し、画像をページの中央に配置する必要があるスライドショーがあります。サイズが変化しても両側に余白がないように、画像はページよりも幅が広くなっています。
フルサイズの画像は幅 4800px ですが、これはブラウザのサイズによって異なります。
画像を 1 つのサイズのみでセンタリングするという問題であれば、
#image{left:50%, margin-left:2400px;}
しかし、空きスペースに合わせて画像のサイズを変更しているため、常に画像の高さ全体を表示できるため、表示される画像の幅が変化し、その中央揃えの方法は良くありません。
では、javascript を使用して現在の画像の幅を確認し、margin-left プロパティを変更するにはどうすればよいですか、それとも css で行うことができますか?
ここにCSSを少し追加するために編集します：
これは、ブラウザ/画面サイズに応じて、使用可能なスペースに高さ方向に収まるように画像のサイズを変更します。しかし、センタリングが欠落しています。
#slideshow{
max-height:100%;
width:auto;
background-color: blue;
overflow: hidden;
text-align: center;
z-index:5;}
.size-4{
max-height:100%;
width:auto;}