0

確かにこれは簡単ですが、機能させることはできません。

http://jsfiddle.net/2X6pJ/を参照してください

<div class="media">
    <a class="pull-left" href="#">
        <img src="http://placehold.it/250x250"/>
    </a>
    <div class="media-body">
        <h3 class="media-heading">Hello</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

テキストの段落 (div.media-body) を常に画面幅の少なくとも 50% にしたいだけなので、小さい画面では画像が小さくなります。最小幅を追加すると、画像の下にテキストが強制されるようです。

Twitter ブートストラップを使用しているため、レスポンシブ イメージは既にセットアップされています。問題は、画像だけが残り、すべてのテキストが下に移動するまで有効にならないことです (パネルのサイズを変更したとき)。

4

1 に答える 1

1

divのサイズが変更されたときに画像のサイズを変更したい場合は、これを試してください：

img { display: block; max-width: 100%; }

簡単な例を次に示します: http://jsfiddle.net/2X6pJ/8/

于 2013-06-12T14:33:33.137 に答える