2

ユニットの100％を占める.hero-unit内に画像を配置しようとしています。これは、ウィンドウ全体のサイズに応じて拡大縮小されることを意味します。

今はそこにありますが、画像の右側に100pxのパディングがあるようです。画像の最大幅を100％に調整すると、それに応じて拡大縮小されません。

<div class="hero-unit">
    <img src="images/landscape.png">
</div>

右側のパディングを削除するだけでなく、ブートストラップの自動サイズ変更機能を維持する方法を知っている人はいますか？

4

3 に答える 3

1

前述のように、次のセレクターを使用します。


.hero-unit img {
 width: 100%; height: auto;   
}

作業サンプル: http://jsfiddle.net/basarat/MgcDU/2145/

于 2013-02-26T03:03:51.650 に答える
0

width: 100%; height: auto;ウィンドウ幅に応じたコンテナdivのサイズ変更が正しい限り、機能するはずです。

于 2013-02-26T02:31:21.563 に答える
0

次のことができます。

ここに1つのjsfiddleがありますhttp://jsfiddle.net/shail/5YD2J/1/

<div class="container">
<div class="hero-unit">
    <img src="http://placehold.it/1500x400">
 </div>
</div>

.hero-unit {
     padding:6px;
  }

画像を高解像度にする必要があります。幅と高さが小さい画像をスケーリングすると、引き伸ばされた寸法が悪くなり、見栄えが悪くなります。

于 2013-02-26T05:40:12.190 に答える