1

私はしばらく答えを探していましたが、しばらくいじっていましたが、解決策が見つからないようです。おそらくそれは地獄のように簡単ですが、頭を包むことはできません。

コンテナーにラップされた「max-width:44%」のインライン スタイルの画像があります。

コンテナをその中の画像と同じ幅にするにはどうすればよいですか?

<div class="post" >
<img src="http://placekitten.com/200/300" style="vertical-align:bottom; max-width:44%;"/>                                        
</div>

.post{position:relative; display:inline-block;  border: 1px solid lime; }

jsfiddle の例を次に示します: http://jsfiddle.net/37Fyb/2/

4

2 に答える 2

1

パーセンテージ幅は、子要素をその親の幅のパーセンテージに設定します。この場合、子はあなたのものimgで、親はあなたの.post仕切りです。画像の幅を 44% に設定すると、仕切りの幅の 44% に設定されます。つまり、コンテナーに何を使用しても、画像は常に幅の 44% になります。

この問題を回避する 1 つの方法は、img100% の幅と.post44% の幅の仕切りを指定し、それを固定幅の別の仕切りでラップすることです。

HTML

<div class="outerContainer">
    <div class="post" >
        <img src="..." style="... width:100%;" />                                        
    </div>
</div>

CSS

.outerContainer {
    width:202px;
}
.post{
    border: 1px solid lime;
    width:44%;
}

JSFiddle の例。

于 2013-03-27T15:41:36.190 に答える
0

これを試して：

.post{
  position:relative; 
  display:inline-block;  
  border: 1px solid lime; 
  max-width:44%}

img{ 
  vertical-align:bottom; 
  max-width:100%;
}
于 2013-03-27T15:25:12.463 に答える