So passen Sie die Größe eines Bildes automatisch an, während das Seitenverhältnis beibehalten wird

Lesezeit: 3 Minuten

Benutzeravatar von 001
001

Wie ändern Sie die Größe eines großen Bildes automatisch, sodass es in einen Div-Container mit kleinerer Breite passt, während das Breite:Höhe-Verhältnis beibehalten wird?


Beispiel: stackoverflow.com – wenn ein Bild in das Bearbeitungsfeld eingefügt wird und das Bild zu groß ist, um auf die Seite zu passen, wird die Größe des Bilds automatisch angepasst.

  • Einige interessante Bibliotheken zum Anpassen der Bildgröße an den Container: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin

    – Maxime Pacary

    13. Juli 2011 um 13:10 Uhr

  • Abgesehen von @ Kevins Antwort … Sie können auch Dienste wie ImageBoss verwenden, um Ihre Bilder bei Bedarf in der gewünschten Größe zu erstellen. Das Einpassen des Bildes in den Container ist großartig, aber das reaktionsschnelle Bereitstellen von Bildern ist viel schwieriger.

    – Igor Escobar

    24. Mai 2018 um 21:35 Uhr

  • Mögliches Duplikat: stackoverflow.com/questions/1891857/…

    – jolumg

    17. Oktober 2018 um 10:33 Uhr

  • @jolumg Nicht ganz; Während es bei einigen Lösungen viele Überschneidungen gibt, gibt es auch viele Lösungen, die nicht austauschbar sind, da diese fragt, wie ein Bild vergrößert werden soll, während diese fragt, wie ein Bild verkleinert werden soll.

    – TylerH

    2. Januar 2019 um 15:37 Uhr

Benutzeravatar von Shih-Min Lee
Shih Min Lee

Es stellt sich heraus, dass es einen anderen Weg gibt, dies zu tun: object-fit.

<img style="height: 100%; width: 100%; object-fit: contain"/>

wird die Arbeit machen. Vergessen Sie nicht, andere notwendige Attribute wie z src Und altNatürlich.

Geige: http://jsfiddle.net/mbHB4/7364/

  • Dadurch wird das Bild so skaliert, dass die größere Dimension vollständig in den Container passt, sodass die kleinere Dimension es möglicherweise nicht vollständig abdeckt. Um stattdessen die größere Abmessung zuzuschneiden, verwenden Sie object-fit: cover

    – Gabriel Grant

    20. Oktober 2015 um 17:08 Uhr

  • object-fit: Cover hat bei mir funktioniert, aber jetzt sicher warum ??

    – vikramvi

    27. Juli 2022 um 5:40 Uhr

Benutzeravatar von Humble Rumble
Demütiger Rumble

Hier ist eine Lösung, die Ihr Bild sowohl vertikal als auch horizontal innerhalb eines Div ohne Dehnung ausrichtet, selbst wenn das gelieferte Bild zu klein oder zu groß ist, um in das Div zu passen.

Der HTML-Inhalt:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

Der CSS-Inhalt:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

Der jQuery-Teil:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Benutzeravatar von TylerH
TylerH

Sie haben zwei Möglichkeiten, das Bild responsiv zu machen.

  1. Wenn ein Bild ein Hintergrundbild ist.

    #container{
        width: 300px;
        height: 300px;
        background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    <div id="container"><div>
    

    Starte es Hier

    Aber man sollte verwenden img Tag, um Bilder zu setzen, da es besser ist als background-image bezüglich SEO wie du schreiben kannst Stichwort im alt des img Schild. Hier können Sie also das Bild responsiv machen.

  2. Wenn Bild drin ist img Schild.

    #container{
        max-width: 400px;
        overflow: hidden;
    }
    img{
        width: 100%;
        object-fit: contain;
    }
    
    <div id="container">
        <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
    <div>
    

    Starte es Hier

Benutzeravatar von Peter Mortensen
Peter Mortensen

Mach es einfach!

Geben Sie dem Behälter a Fest height und dann für die img tag darin, set width Und max-height.

<div style="height: 250px">
     <img src="https://stackoverflow.com/questions/3029422/..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Der Unterschied besteht darin, dass Sie die festlegen width 100% zu sein, nicht die max-width.

1446300cookie-checkSo passen Sie die Größe eines Bildes automatisch an, während das Seitenverhältnis beibehalten wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy