2

縦横比を決めて流動的な画像をクレートするにはどうすればよいですか? (16:9 としましょう)
で流動的にしましmax-width: 100%;たが、アスペクト比を変更できません。

注: ほとんどの場合、画像の縦横比は異なります。

4

3 に答える 3

9

イメージを 2 つのコンテナーにラップできます。1 つのコンテナーheight:0とpadding-top、幅に比例して画像の高さに必要なパーセンテージを指定します。したがって、高さが幅の 50% の場合は、 と を使用padding-top:50%します。これにより、ここでheight:0説明したように、高さが幅に 50% 比例します。

.wrapper {padding-top:50%;height:0;position:relative;}

そのコンテナー内に、次のスタイルの別のコンテナーを配置します。

.inner{position:absolute;left:0;top:0;right:0;bottom:0;}

width:100%画像を内側のコンテナに配置して渡すだけです。height:100%

フィドルを参照してください: http://jsfiddle.net/henrikandersson/PREUD/1/ (フィドルを更新)

于 2012-07-09T18:13:36.497 に答える
1

別の投稿でこのコードを見つけました:

例

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-07-09T16:39:04.993 に答える
-1

おそらく、HTML に追加のマークアップが必要になるでしょうが、CSS の Clip プロパティを使用して、表示したい画像の表示部分を切り取ることができます。https://developer.mozilla.org/en/CSS/clip

于 2012-07-09T16:53:45.100 に答える