11

コンテナの幅を画像のサイズに縮小したい。高さは、ブラウザ ウィンドウに対するパーセントで指定されます。

.img
{
    width: auto;
    height:100%;
}
.container
{
    height:100%;
    width:auto;
}

ここにフィドルがあります：

http://jsfiddle.net/EdgKr/68/

display:table、同様のケースのように機能しません。これは、表のセルとして、画像が常に元のサイズの 100% パーセントで表示されるためです。

http://jsfiddle.net/EdgKr/67/

4

5 に答える 5

3

その質問をして以来、私はある程度の進歩を遂げました。解決策は信じられないほど単純でした。float:left を追加するだけです。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height:100%;
    width:100%;
}

.container {
    background: green;
    float: left;
    height: 100%;
}

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

画像にパーセンテージの高さがある場合でも、コンテナーは期待どおりに縮小されます。 http://jsfiddle.net/EdgKr/74/

しかし、たとえばパディングを追加すると、非常に簡単に壊れてしまいます。 http://jsfiddle.net/EdgKr/72/

于 2013-05-19T11:15:43.440 に答える
0

コンテナをその中身のサイズに一致させることを私が知っている（または現時点で考えることができる）唯一の方法は、それをfloatingすることです。それがオプションである場合、それはあなたが探しているものを得るかもしれません。（これがhttp://jsfiddle.net/EdgKr/61/float:left;に追加された更新されたフィドルです）.vertainer

于 2013-01-18T19:30:04.013 に答える
0

コンテナを画像の高さと幅に一致させたいだけの場合、別名シュリンクラップにはいくつかのオプションがあります。

float:left/right, display:inline-block, display:table, position:absolute;

幅が指定されていない場合、これらのそれぞれはシュリンクラップ効果を引き起こします。

そのためにインラインブロックを使用することをお勧めします。

また、display:table は問題なく動作するようです:

http://jsbin.com/isayar/1/edit

ただし、IE7 ではサポートされていないため、個人的にはインライン ブロックを使用します。

于 2013-01-18T19:35:20.590 に答える
0

とてもシンプル

display: inline-blockに追加.container

フィドルに緑色が表示される理由は、表示ブロックが幅全体に収まるようにするためです

http://jsfiddle.net/z7CT6/

于 2013-05-23T22:44:50.793 に答える