ホームページ  >  記事  >  ウェブフロントエンド  >  画像幅処理の問題_html/css_WEB-ITnose

画像幅処理の問題_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:41:57972ブラウズ

ピクセルサイズが1920X500の画像がありますが、1920、1280、1024などの異なる解像度の画面で縦方向に中央に表示する方法を教えてください。例えば、解像度1024の画面では中央の幅1024だけが表示され、高さは500となります。教えてください。


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

以前に見た覚えがありますが(どこでしたか忘れました)、背景画像の位置をjsで設定する計算式は、 の座標を設定するようです。画像の高さを半分にして、画像の高さの半分を引いたものを試していただけますか?計算式は、画面の高さの半分から画像の高さの半分を引いたものになるようです

初心者なので教えてください。私が例ですか?ありがとう!

あなたの CSS がどれほど基本的なのかわかりません。 。 。ここでは css+js を併用する必要があります

1. まず、画像を絶対位置に配置する必要があります
Position:absolute; 2. このとき、画像の左オフセットは 50% です left:50%;画像が右に傾いていることがわかります

3. 左マージンを追加します
3.1 画像の幅が 1920 に固定されている場合は、画像に margin-left を追加します
margin-left:-960px
3.2画像は固定幅ではないため、js を使用してマージンを追加する必要があります (原理は画像の幅を取得し、左の距離は負の幅の半分です。)
Document.GetelementBytagname ("IMG") . STYLE.MARGINLEFT =-(Document.GetelementBytagName ("IMG") [0] .width/2)+ 2)+ 2)+ 2)+ 2)+ "px"; CSS は基本的なものです。 。 。ここでは css+js を一緒に使用する必要があります
…………

私も CSS は初めてです

詳しい例を教えてくれる専門家はいますか? CSS を始めたばかりで、JS についてはわかりません。 ! !

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。