スクロールバーは表示されず、画像は自動的に screen_html/css_WEB-ITnose に合わせて拡大縮小されます。-htmlチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

スクロールバーは表示されず、画像は自動的に screen_html/css_WEB-ITnose に合わせて拡大縮小されます。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:58 AM

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

style="width:100%" は、画像の外側に他のオブジェクトがあるかどうかに注意する必要があります。通常、js を使用して計算されます。

いくつかのソリューションがあり、それぞれが異なるシナリオに適しています。
1. 背景画像。
background-image:url();background-size:100% 100%;
この欠点は、IE ブラウザの以前のバージョンと互換性がないことです。
2. 絶対配置、js が幅と高さを計算します。
#a{position:absolute:top:0;left:0};

function getSize() {    var winWidth = 0,        winHeight = 0;    if (window.innerWidth)        winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth))        winWidth = document.body.clientWidth;    // 获取窗口高度     if (window.innerHeight)        winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight))        winHeight = document.body.clientHeight;    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {        winHeight = document.documentElement.clientHeight;        winWidth = document.documentElement.clientWidth;    }    return {        w : winWidth,        h : winHeight    };}var size = getSize();document.getElementById('a').width = size.w + 'px'; document.getElementById('a').heigth = size.h + 'px';

ログイン後にコピー

img{width:100%}

個人使用: 最大幅：100％、このスタイル。この利点は、画像が画面幅より小さい場合、拡大されず、画面を超えた場合でも変形せずに画面サイズに合わせて自動的に調整されることです。
コードは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,html{	margin:0px;	height:100%;}</style></head><body>	<div class="autoHeight"><img src="5398780_094651038992_2.jpg" style="max-width:100%; max-height:100%;" /></div></body></html>

ログイン後にコピー

私の提案する方法:
画像が画像処理のみの場合: CSS ステートメントを記述し、画像の幅を auto に設定し、段落を記述することで高さを設定する js イベントはブラウザーウィンドウの高さを読み取り、ページが読み込まれるときにそれを img に追加します。その後、ページを開いたときに上下のスクロールバーはまったく表示されませんが、規則的ではありません。左右に空白があることがわかります。
画像がバックグラウンド処理として使用される場合: ページのロード時に js イベントを記述することで、div、width: 100%、overflow: hidden を宣言する CSS ステートメントを記述し、ブラウザーウィンドウの高さが読み取られます。 div に追加すると、ページを開いたときに、上下左右のスクロールバーがまったく表示されません。

このウェブサイトの声明

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