ホームページ > ウェブフロントエンド > htmlチュートリアル > 画像幅処理の問題_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 11:41:57
オリジナル
1010 人が閲覧しました

ピクセルサイズが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 についてはわかりません。 ! !

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート