63

<img>私の最終目標は、cssのみを使用して、親/祖父母要素の明示的に設定された高さを超えて拡張しない流体を作成することです。

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

height:100%; width:auto;横方向と同じようには機能しません。UncDaveのol'パッド入りボックスとその機能の絶対位置を試してみましたが、画像のアスペクト比を事前に知っておく必要があるため、比率の異なる画像には適用できません。 。したがって、最後の要件は、cssが比率に依存しない必要があるということです。

この質問への答えはおそらくユニコーンファームの隣に座っていることを私は知っていますが、とにかくそれをそこに捨てると思いました。

4

3 に答える 3

90

秘訣は、との両方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/

于 2013-01-17T23:40:12.223 に答える
3

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

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

デスクトップ画面のimgはそれを超えて成長しません500pxが、小さなモバイル画面の場合は、外側のコンテナーの70％に縮小します。チャームのように機能します。

プロパティも動作しwidthます。

于 2018-01-14T18:41:16.080 に答える
-9

インラインスタイリングを使用して、高さを制限できます。 

<img src="" class="img-responsive" alt="" style="max-height: 400px;">
于 2015-02-10T21:17:28.280 に答える