画像を引き伸ばさずに画像の幅と高さを設定するにはどうすればよいですか？

Question 1

私が持っている場合：

#logo {
    width: 400px;
    height: 200px;
}

その後

<img id="logo" src="logo.jpg"/>

そのスペースを埋めるために伸びます。画像のサイズを同じに保ちたいのですが、DOM内でそれだけのスペースを占めるようにします。カプセル化<div>またはを追加する必要があり<span>ますか？スタイリングにマークアップを追加するのは嫌いです。

Question 2

はい、カプセル化するdivが必要です。

<div id="logo"><img src="logo.jpg"></div>

次のようなもので：

#logo { height: 100px; width: 200px; overflow: hidden; }

他の解決策（パディング、マージン）は（画像のサイズに基づいて適切な値を計算する必要があるという点で）面倒ですが、コンテナーを画像よりも効果的に小さくすることもできません。

また、上記はさまざまなレイアウトにはるかに簡単に適合させることができます。たとえば、右下の画像が必要な場合：

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Question 3

2017年の回答

CSSオブジェクトフィットは、現在のすべてのブラウザで機能します。これにより、img画像を引き伸ばすことなく要素を大きくすることができます。

object-fit: cover;CSSに追加できます。

Question 4

divの背景として画像を読み込みます。

の代わりに：

<img id='logo' src='picture.jpg'>

行う

<div id='logo' style='background:url(picture.jpg)'></div>

すべてのブラウザは、画像の収まらない部分をトリミングします。
これには、オーバーフローが隠されている要素をラップするよりもいくつかの利点があります。

追加のマークアップはありません。divは単にimgを置き換えます。
画像を簡単に中央揃えにするか、別のオフセットに設定します。例えば。url(pic) center top;
十分に小さいときに画像を繰り返します。（OK、なぜあなたがそれを望むのかわからない）
同じステートメントでbgの色を設定し、同じ画像を複数の要素に簡単に適用し、bg画像に適用されるすべてのものを適用します。

更新：この回答は、オブジェクトフィット前のものです。これで、おそらくobject-fit / object-positionを使用する必要があります。

古いブラウザ、追加のプロパティ（background-repeatなど）、エッジケース（たとえば、flexboxとobject-positionでのChromeのバグの回避、grid + autoheight + object-でのFF（以前の？）の問題）でも引き続き役立ちます。フィット。グリッド/フレックスボックスのラッパーdivは、多くの場合...直感的でない結果をもたらします。）

Question 5

CSS3オブジェクトフィット

Webkit、IE、Firefoxでどこまで実装されているかわかりません。しかし、Operaは魔法のように機能します

object-fitSVGコンテンツで機能しpreserveAspectRatio=""ますが、SVG自体に属性を設定することでも同じ効果を得ることができます。

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

クリスミルズのデモはここにありますhttp://dev.opera.com/articles/view/css3-object-fit-object-position/

Question 6

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Question 7

divを作成し、クラスを与えます。次に、その中にimgをドロップします。

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

divのサイズを設定し、相対的なものにします。

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

次に、画像のスタイルを設定します

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

お役に立てば幸いです

Question 8

以下のように使用できます：

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

スニペットを展開

Question 9

カプセル化する<div>または<span>を追加する必要がありますか？

私はあなたがそうだと思います。頭に浮かぶのはパディングだけですが、そのためには事前に画像のサイズを知っておく必要があります。

Question 10

高さ/幅の代わりにパディングを設定してみてください。

Question 11

私が考えることができるのは、幅または高さのいずれかを伸ばして、比率アスペクトでサイズを変更することです。側面に空白があります。ワイドスクリーンが1024x768の解像度を表示する方法のようなもの。

Question 12

フレックスボックスの使用が有効なオプションである場合（古いブラウザをサポートする必要はありません）、ここで他の回答を確認してください（これはおそらくこれと重複しています）：

基本的に、imgタグをdivでラップする必要があり、cssは次のようになります。

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

Question 13

これはかなり古い質問ですが、Chrome / Edge（object-fitプロパティを使用）ではすべてが正常に機能するというまったく同じ厄介な問題がありましたが、IE11では同じcssプロパティが機能しませんでした（IE11ではサポートされていないため）。私のすべての問題を解決したHTML5「figure」要素を使用しました。

私の場合、外側のDIVタグはまったく役に立たなかったため、個人的には使用しませんでした。そのため、外側のDIVを避け、単に「figure」要素に置き換えました。

次のコードは、画像を（元のアスペクト比を変更せずに）適切に縮小/縮小するように強制します。

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

およびcssクラス：

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}