0

簡単な HTML/CSS タスクがあります。同じサイズの 2 つの画像が連続して表示されているページがあります。このページを参照してください。これらの基準をすべて満たすように、画像の表示サイズを調整する必要があります。

  1. 画像はブラウザのウィンドウで一緒に完全に表示される必要があります。つまり、含まれる div/テーブルのサイズはクライアント領域のサイズに制限されます
  2. 画像は拡大されず、縦横比は保持されます
  3. 画像は水平方向に中央に配置され、その間に一定のスペースがあります
  4. 少なくとも IE9、Chrome、および Safari で動作します

私は CSS の経験があまりないので、最大で 4 の 2 つの基準を打ち負かすことができます。

私が現在使用しているサンプルページは、3、4、および部分的に 1 を満たしています (幅のみが制限されています)。関連するすべてのマスター CSS ファイルと自動生成された ASP.NET コンテナーを残して、できるだけ問題に近いサンプルを残しました。

画像はinputではなく タグ に残す必要がimgあります。重要ではありませんが、望ましいです。すべての条件を満たすスタイル属性の適切な組み合わせを提案してください。

アップデート：

画像がクライアント領域の高さよりも高い高さを持つことが許可されている、緩和された基準 1 のソリューションも高く評価されます。

4

2 に答える 2

0

わかりましたが、代わりに画像を背景として使用しました<img>。それが問題ではないことを願っています。

background-size:contain;画像の元の比率/縦横比を維持しながら、背景画像がスケーリングされます。FF4+、IE9+、Chrome1+ (ベンダープレフィックス付き)、Opera10+、Safari 3+ (ソース) でサポートされています。

最初の要件の主な問題:「containig div/table のサイズはクライアント領域のサイズに制限されています」はheight:100%;、親コンテナーにも高さが設定されていない限り設定できないことです。

あなたのページには、動的な高さのヘッダーとフッターがあることがわかります。そのため、コンテナーの高さを調整するには jQuery が必要です。しかし、最初に CSS だけでそれを行う方法を見てみましょう。次に、ヘッダーとフッターを追加します。

デモ(ウィンドウのサイズを変更してみてください)

HTML:

<html>
<body>
<div id="body">
    <div>
        <div class="left"></div>
    </div>
    <div>
        <div class="right"></div>
    </div>
</div>
</body>
</html>​

CSS:

html, body, #body {
    width:100%;
    height:100%;
}
#body, #body > div {
    overflow:hidden;
}
#body > div {
    box-sizing:border-box;
    width:50%;
    height:100%;
    float:left;
    padding:10px; /* or whatever you need */
}
#body > div > div {
    margin:0 auto;
    height:100%;
    width:100%;
    background-repeat:no-repeat;
    background-position:top center;
    -webkit-background-size:contain; /* Chrome1+, Safari 3+ */
    background-size:contain; /* FF4+, IE9+, Chrome3+, Opera10+, Safari 3+ */
}
#body > div > div.left {
    background-image:url(/* your left image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}
#body > div > div.right {
    background-image:url(/* your right image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}​

ヘッダーとフッターを追加しましょう。#bodyから削除height:100%;し、ウィンドウの高さ - ヘッダーの高さ - フッターの高さの結果としてその高さを計算する必要があります。

デモ(ウィンドウのサイズを変更)

HTML:

<html>
<body>
<header>I'm a header</header>
<div id="body">
    <div>
        <div class="left"></div>
    </div>
    <div>
        <div class="right"></div>
    </div>
</div>
<footer>I'm a footer</footer>
</body>
</html>​

CSS:

html, body {
    width:100%;
    height:100%;
}
header, footer {
    background:grey;
}
#body {
    height:400px; /* fallback no javascript */
}
#body, #body > div {
    overflow:hidden;
}
#body > div {
    box-sizing:border-box;
    width:50%;
    height:100%;
    float:left;
    padding:10px; /* or whatever you need */
}
#body > div > div {
    margin:0 auto;
    height:100%;
    width:100%;
    background-repeat:no-repeat;
    background-position:top center;
    -webkit-background-size:contain; /* Chrome1+, Safari 3+ */
    background-size:contain; /* FF4+, IE9+, Chrome3+, Opera10+, Safari 3+ */
}
#body > div > div.left {
    background-image:url(/* your left image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}
#body > div > div.right {
    background-image:url(/* your right image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}​

jQuery:

function calcHeight(){
    var docHeight = $(document).height();
    var headHeight = $('header').outerHeight();
    var footHeight = $('footer').outerHeight();
    var bodyHeight =  docHeight - ( headHeight + footHeight);
    $('#body').height(bodyHeight);
}
calcHeight(); /* called first time on page load */
$(window).on('resize',calcHeight());​/* do the math again when window's resized */

それはかなり簡単だと思います。わかりやすくするためにこのように書きましたが、もちろんもっと圧縮することもできます。

outerHeightフッターとヘッダーに可能な余白を含めるために使用しました。

jQuery ライブラリを含めたくない場合は、同じものを取得する純粋な JavaScript の方法が必ずあります。

于 2012-09-27T14:33:13.257 に答える
-1

縦横比を維持するために、css で幅のみを定義すると、縦横比を維持するために高さが自動的に調整されます。

于 2012-09-27T11:13:26.260 に答える