2

div2 つの が行内で隣り合わせに配置されているページ レイアウトがあります。1 つの列には可変長のテキストが含まれ、2 番目の列にはイメージが含まれます。

マークアップは基本的に次のとおりです。

<div class="row-fluid">
   <div class="span6">
      <img src="picture.png">
   </div>
   <div class="span6">
     text<br>text
   </div>
</div>

私が意図しているのは次のとおりです。画像のサイズは、テキストを含む列とまったく同じ高さになるように縮小する必要があります。明確にするために、このjsfiddleを参照してください。

CSSだけでこれを達成する方法はありますか? 私が知る限り、object-fitCSS3 コマンドは私が必要としているものですが、残念ながら十分にサポートされていません (まだ?) 。 caniuseを参照してください。後でjQueryプラグインで必要になるためbackground-image、周囲の画像を設定することdivはオプションではありません。img

4

2 に答える 2

0

-編集-

この更新されたフィドルを参照してください：http：//jsfiddle.net/2HjcV/3/ これはを利用しbackground-size:containます。これに関する詳細はこちら：https ：//developer.mozilla.org/en-US/docs/CSS/background-size

OP、

<div class="span6">画像を<div class="span6">保持しているをテキストを保持しているに移動してみてください。

ここで更新されたフィドル

于 2013-03-14T01:01:14.980 に答える
0

簡単に言えば、クロスブラウザーで何かをしたい場合に限り、これは CSS では不可能です。流動的なレイアウトがあり、デフォルトでブートストラップには img at max-width: 100% の css ルールがあり、親コンテナーにバインドされ、アスペクト比が尊重されると思います。テキストdivの高さを知り、その高さを画像に動的に追加するか、固定高さの親コンテナーで両方をラップし、画像にmax-height: 100%を適用し、overflow: scrollまたはhiddenを適用するには、Javascriptが必要です。 divで。お役に立てば幸いです、乾杯

于 2013-03-14T05:29:19.257 に答える