3

これは簡単な質問ではないかもしれませんが、最善を尽くします。

このサンプル サイトがあります: http://lotvonen.tumblr.com/ 内部ブラウ​​ザー ウィンドウの高さを自動的に計算し、その数値をイメージ ラッパー div の高さとして設定する小さな JavaScript があります。ラッパー内の画像の高さはラッパーの 100% であるため、すべての通常の画面サイズでフルスクリーンの画像を取得できます。これは、高さよりも幅の広い画面 (デスクトップ、ラップトップなど) でうまく機能します。

しかし！

幅よりも高さが長い画面 (スマートフォン、iPad など) では、画像が横から切り取られます。私はそれを望まないので、ブラウザ画面の最大幅が 1024 の場合、クリッピングが発生しないように、メディアクエリで高さを auto に、幅を 100% に割り当てるという一時的な解決策があります。しかし、これはあまり良い解決策ではなく、特定の解像度で壊れます。また、解像度が低い (800x600 など) と私の JS が破壊されます。

JS は次のとおりです。

<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;

for (var i = 0; i < size; i++) {

var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>

ここに私のCSSがあります：

.img {
    max-width:100%
}
.img img {
    width:auto;
}
.img img {
    height:100%;
}

@media only screen and (max-width: 1024px) {

.img {
    height:auto !important;
}
.img img {
    height:auto !important;
    max-width:100%;
}

そしてここにdivがあります：

<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>

ブラウザ ウィンドウが幅よりも高くなっている場合 (例: 720x1024)、画像が幅によって調整され、ブラウザ ウィンドウが高さよりも幅が広い場合 (例: 1024x720) に画像が調整されるようにするにはどうすればよいですか?今（高さで、JSで）。これはまったく可能ですか？これに対する簡単な CSS 修正はありますか、それとも JS をもっといじる必要がありますか?

前もって感謝します！

4

2 に答える 2

2

また、定期的に JavaScript でアスペクトを取得し、4:3、ワイドスクリーン、ポートレートのいずれであるかを指定するクラスを body オブジェクトに追加することもできます。次に、ウィンドウのサイズが変更された場合に備えて、間隔を置いて実行します。

例

CSS

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

JavaScript

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);
于 2012-01-24T00:30:53.467 に答える
1

JavaScriptで最初にアスペクト比を取得することをお勧めします。とを使用window.innerHeightしwindows.innerWidthて、必要な分割を行います。そして、これを条件にします。画面が高さよりも広い場合は、css の画像を に設定しwidth: 100%ます。それ以外の場合は、 を設定しheight: 100%ます。

于 2012-01-23T22:56:06.290 に答える