0

.well div 内に絶対位置の画像を配置しようとしています。次のCSS形式を使用してレスポンシブ画像を作成したいので、画像の位置を絶対に保つ必要があります。しかし、画像はdivスコープの外に表示されます.htmlとcssのコードは次のとおりです

<div class="container">
  <div class="well">
      <img  class="img-polaroid" src="http://testimage.png" />
  </div>
</div>

.css

img{
     position: absolute;
     max-width: 80%;
     top: 10%;
     left: 10%;
}

ご覧のとおり、位置プロパティを「相対」に変更することはできません。height:auto; も追加しようとしました。プロパティを .well クラスに追加しましたが、どちらも通過しませんでした。

4

1 に答える 1

0

絶対配置が必要な理由は、含まれている要素に対する相対単位であるパー​​センテージを使用しているためです。したがって、<img>タグが div 内にある場合は、パーセンテージの幅または高さです。50% は常に の高さまたは幅の 50% になるとしましょう(これはが流動的<div>であると仮定しています)。<div>

max-width を使用するのは良いことです。

微調整が必​​要なシナリオのもう 1 つの手法は、画像の寸法を把握し、それをページのサイズと比較することです。画像が 500 X 100 で、ページ幅が 1200px 幅のドキュメントであるとします。割合を求める計算は (500 / 1200 ) × 100 = 41.66% です。

これが、Bootstrap.css ファイルですべての幅がパーセンテージで指定されている理由です。

私はあなたにそれをすべて説明したことを願っています.

于 2013-06-14T00:02:18.077 に答える