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

Sie können verwenden:-

transform: scaleX(1.2);

um die Breite zu ändern, ohne die Höhe zu ändern.

Und

transform: scaleY(1.2);

um die Höhe zu ändern, ohne die Breite zu ändern

Sie können dies für Bilder und Video-Tags in HTML und CSS verwenden. Dies ändert auch nicht das Seitenverhältnis.

Answer 2

Dadurch wird das Bild verkleinert, wenn es zu groß für den angegebenen Bereich ist (im Gegensatz zu unten, es wird nicht vergrößert).

Die Lösung von setec ist für die Funktion "Verkleinern" im automatischen Modus geeignet. Aber um das Bild im "Auto"-Modus optimal zu vergrößern, müssen Sie das empfangene Bild zunächst in eine temporäre Datei speichern, Prüfen Sie, ob es in der Höhe oder in der Breite vergrößert werden kann (je nach Seitenverhältnis des Bildes und dem Seitenverhältnis Ihres Anzeigeblocks),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Dieser Ansatz ist nützlich, wenn die empfangenen Bilder kleiner sind als das Anzeigefeld. Sie müssen sie auf Ihrem Server in der ursprünglichen kleinen Größe speichern und nicht in ihrer erweiterten Version, um Ihr größeres Anzeigefeld auszufüllen und Größe und Bandbreite zu sparen.

Answer 3

Wie wäre es, ein Pseudo-Element für die vertikale Ausrichtung zu verwenden? Diese weniger Code ist für ein Karussell, aber ich denke, es funktioniert auf jeder festen Größe Container. Er behält das Seitenverhältnis bei und fügt @graue-dunkle Balken oben/unten oder links/rechts für die kürzeste Abmessung ein. In der Zwischenzeit wird das Bild horizontal durch das text-align und vertikal durch das Pseudo-Element zentriert.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Answer 4

Präsentation im Vollbildmodus:

img[data-attribute] {height: 100vh;}

Wenn die Höhe des Sichtfensters größer ist als die des Bildes, wird das Bild im Verhältnis zu diesem Unterschied natürlich schlechter.

Answer 5

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">