Wie kann ich die Breite und Höhe eines Bildes einstellen, ohne es zu dehnen?

Wenn ich habe:

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

dann

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

wird sich dehnen, um diesen Raum zu füllen. Ich möchte, dass das Bild gleich groß bleibt, aber so viel Platz im DOM einnimmt. Muss ich eine Kapselung hinzufügen <div>oder <span>? Ich hasse es, Markups für das Styling hinzuzufügen.

Ja, Sie benötigen ein Kapselungs-Div:

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

mit so etwas wie:

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

Andere Lösungen (Auffüllen, Rand) sind langwieriger (da Sie den richtigen Wert basierend auf den Bildabmessungen berechnen müssen), lassen jedoch nicht effektiv zu, dass der Container kleiner als das Bild ist.

Das Obige kann auch viel einfacher für verschiedene Layouts angepasst werden. Wenn Sie beispielsweise das Bild unten rechts sehen möchten:

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

2017 Antwort

Die CSS-Objektanpassung funktioniert in allen aktuellen Browsern. Dadurch kann das imgElement größer sein, ohne das Bild zu dehnen.

Sie können object-fit: cover;Ihrem CSS hinzufügen .

Laden Sie das Bild als Hintergrund für ein Div.

Anstatt von:

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

tun

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

Alle Browser beschneiden den Teil des Bildes, der nicht passt.
Dies hat mehrere Vorteile gegenüber dem Umschließen eines Elements, dessen Überlauf verborgen ist:

1. Kein zusätzlicher Aufschlag. Das div ersetzt einfach das img.
2. Zentrieren oder stellen Sie das Bild einfach auf einen anderen Versatz ein. z.B.url(pic) center top;
3. Wiederholen Sie das Bild, wenn es klein genug ist. (OK, keine Ahnung, warum du das willst)
4. Legen Sie eine Hintergrundfarbe in derselben Anweisung fest, wenden Sie dasselbe Bild problemlos auf mehrere Elemente an und alles, was für Hintergrundbilder gilt.

Update: Diese Antwort stammt aus der Zeit vor der Objektanpassung. Sie sollten jetzt wahrscheinlich Objektanpassung / Objektposition verwenden.

Es ist weiterhin nützlich für ältere Browser, für zusätzliche Eigenschaften (z. B. Hintergrundwiederholung) und für Randfälle (z. B. Problemumgehung von Chrome-Fehlern mit Flexbox und Objektposition sowie FFs (frühere?) Probleme mit Raster + Autohöhe + Objekt-). fit. Wrapper Divs in Grid / Flexbox liefern oft ... unintuitive Ergebnisse.)

CSS3-Objektanpassung

Ich bin mir nicht sicher, inwieweit es von Webkit, IE und Firefox implementiert wurde. Aber Opera funktioniert wie Magie

object-fitfunktioniert mit SVG-Inhalten, aber der gleiche Effekt kann auch erzielt werden, indem das preserveAspectRatio=""Attribut in der SVG selbst festgelegt wird.

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

Chris Mills Demo gibt es hier http://dev.opera.com/articles/view/css3-object-fit-object-position/

#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;
}

Machen Sie ein Div und geben Sie ihm eine Klasse. Dann legen Sie ein Bild hinein.

<div class="mydiv">

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

</div>

Stellen Sie die Größe Ihres Div ein und machen Sie es relativ.

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

Stylen Sie dann Ihr Bild

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

hoffentlich hilft das

Sie können wie folgt verwenden:

.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" />

Muss ich eine Kapselung <div> oder <span> hinzufügen?

Ich denke du tust es. Das einzige, was mir in den Sinn kommt, ist das Auffüllen, aber dafür müssten Sie die Abmessungen des Bildes vorher kennen.

Sie können versuchen, die Polsterung anstelle der Höhe / Breite einzustellen.

Was ich mir vorstellen kann, ist, entweder die Breite oder die Höhe zu dehnen und die Größe im Verhältnisaspekt zu ändern. Es wird etwas Leerraum an den Seiten geben. So etwas wie ein Breitbildschirm zeigt eine Auflösung von 1024x768 an.

Wenn die Verwendung von Flexbox eine gültige Option für Sie ist (Sie müssen keine alten Browser unterstützen), überprüfen Sie meine andere Antwort hier (die möglicherweise ein Duplikat dieser ist):

Grundsätzlich müssten Sie Ihr IMG-Tag in ein Div einbinden, und Ihr CSS würde folgendermaßen aussehen:

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

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

Dies ist eine ziemlich alte Frage, aber ich hatte genau das gleiche nervige Problem, bei dem alles für Chrome / Edge (mit Objektanpassungseigenschaft) einwandfrei funktionierte, aber dieselbe CSS-Eigenschaft in IE11 nicht funktionierte (da sie in IE11 nicht unterstützt wird) mit HTML5 "figure" Element, das alle meine Probleme gelöst hat.

Ich persönlich habe das äußere DIV-Tag nicht verwendet, da dies in meinem Fall überhaupt nicht geholfen hat. Deshalb habe ich das äußere DIV vermieden und einfach durch das Element 'figure' ersetzt.

Der folgende Code zwingt das Bild, es zu verkleinern / zu verkleinern (ohne das ursprüngliche Seitenverhältnis zu ändern).

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

und CSS-Klassen:

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

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