CSS erzwingt Bildgrößenänderung und behält Seitenverhältnis bei

Question

Ich arbeite mit Bildern und bin auf ein Problem mit den Seitenverhältnissen gestoßen.

<img src="big_image.jpg" width="900" height="600" alt="" />

Wie Sie sehen können, height y width sind bereits festgelegt. Ich habe eine CSS-Regel für Bilder hinzugefügt:

img {
  max-width: 500px;
}

Aber für big_image.jpg erhalte ich width=500 y height=600 . Wie kann ich Bilder so einstellen, dass ihre Größe verändert wird, ohne ihr Seitenverhältnis zu verändern?

Answer 1

Fügen Sie einfach diese zu Ihrem css, Es wird automatisch schrumpfen und erweitern mit dem ursprünglichen Verhältnis zu halten.

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

Answer 2

Um ein responsives Bild beizubehalten und dennoch ein bestimmtes Seitenverhältnis zu erzwingen, können Sie Folgendes tun:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Und SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Damit lässt sich ein bestimmtes Seitenverhältnis erzwingen, unabhängig von der Größe des Bildes, das die Autoren hochladen.

Dank an @Kseso unter http://codepen.io/Kseso/pen/bfdhg . Unter dieser URL finden Sie weitere Informationen und ein funktionierendes Beispiel.

Answer 3

Setzen Sie die CSS-Klasse des Container-Tags Ihres Bildes auf image-class :

<div class="image-full"></div>

und fügen Sie diese in Ihr CSS-Stylesheet ein.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Answer 4

Ich würde vorschlagen, dass für einen reaktionsfähigen Ansatz die beste Praxis die Verwendung der Ansichtsfenster-Einheiten und die Attribute min/max wie folgt:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Answer 5

Um ein Bild zu erzwingen, das in eine exakte Größe passt, müssen Sie nicht zu viele Codes schreiben. Es ist so einfach

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">