web-dev-qa-db-ja.com

CSSを使用してレスポンシブイメージの高さを制限する

私の最終目標は、流動的な<img>は、CSSのみを使用して親/祖父母要素の明示的に設定された高さを超えて展開しません。

現在、私はこれを通常の（max-width:100; height:auto;）imgタグから高さ/幅の属性を読み取り、アスペクト比を計算し、目的の高さ制限で画像の正しい幅を計算し、その幅をmax-width画像のコンテナ要素。非常に簡単ですが、javascriptなしでできるようになりたいです。

height:100%; width:auto;はその横方向と同じようには機能せず、Unc Daveのol 'パッド付きボックスとその機能の絶対配置を試みましたが、画像の縦横比を事前に知っている必要があるため、異なる割合。そのため、最終的な要件は、CSSが比例に依存しないことです。

この質問に対する答えはおそらくユニコーン農場の隣に座っていることを知っていますが、とにかくそこに捨てるつもりだったと思います。

cssresponsive-design
38
RobW

トリックは、max-height: 100%;とmax-width: 100%;の両方を.container imgに追加することです。 CSSの例：

.container {
  width: 300px;
  border: dashed blue 1px;
}

.container img {
  max-height: 100%;
  max-width: 100%;
}

この方法で、.containerの指定された幅を任意の方法（200pxや10％など）で変えることができ、画像はその自然な寸法より大きくなりません。 （画像の自然なサイズに依存したくない場合は、100％ではなくピクセルを指定できます。）

ここに全体のフィドルがあります： http://jsfiddle.net/KatieK/Su28P/1/

58
KatieK

以下の3つのスタイルをimgタグに設定します

max-height: 500px;
height: 70%;
width: auto;

デスクトップ画面のimgは500pxしかし、小さなモバイル画面の場合、外側のコンテナの70％に縮小します。魅力のように機能します。

widthプロパティでも機能します。

2
JerryGoyal