1

だから、私は完全に流動的なウェブページを持っています。width:100% の親 DIV があり、スタイルの IMAGE 内にあります。

<div>
     <img src="image.png" alt="" />
</div>

<style>
    div{ width:100% }
    img{
      display: block;
      margin: auto;
      max-width: 100%;
    }
</style>

画像は div の中央に配置されます。画像のサイズはわかりませんが、常に親DIVよりも小さいため、imgの境界線からdivの境界線まで余白があります。これで、ブラウザーのサイズを変更しても、親 DIV が画像の境界に達するまで画像のサイズが変更されません。

画像のスタイルが width:100% の場合、実際のサイズを超えて伸びてしまいます...

ブラウザウィンドウのサイズが変更されたときに、この画像をすぐに div でスケーリングしたいと思います。画像キャンバスが親 div の 100% になる場合、動作は私が望むようになります (画像は 100% od div の幅になるため、画像はすぐにサイズ変更されます)。しかし、私はそのような画像を作成することはできません...

4

1 に答える 1

2

純粋なCSSでは不可能だと思いますが、jQueryを使用できます - http://jsfiddle.net/UcV7y/

var ratio = $("img").parent().width() / $("img").width();

$(window).resize(function() {
    $("img").width( $("img").parent().width() / ratio + "px" );
});
​
于 2012-07-05T10:57:10.253 に答える