Wie kann ich die Größe eines Bilds automatisch an einen 'div'-Container anpassen?

1512

Wie können Sie die Größe eines großen Bilds automatisch ändern, damit es in einen Div-Container mit kleinerer Breite passt, während das Verhältnis von Breite zu Höhe beibehalten wird?


Beispiel: stackoverflow.com - Wenn ein Bild in das Editorfenster eingefügt wird und das Bild zu groß ist, um auf die Seite zu passen, wird die Größe des Bilds automatisch geändert.

001
quelle
Einige interessante Bibliotheken für die Größenänderung von Bildern , um sie an den Container anzupassen : * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z
Aside @ Kevins Antwort ... Sie können auch Dienste wie ImageBoss verwenden, um Ihre Bilder bei Bedarf in der gewünschten Größe zu erstellen. Das Anbringen des Bildes am Behälter ist großartig, aber das reaktionsschnelle Bereitstellen von Bildern ist ein Kinderspiel.
Igor Escobar
Mögliches Duplikat: stackoverflow.com/questions/1891857/…
jolumg
@jolumg Nicht ganz; Während es bei einigen Lösungen viele Überlappungen gibt, gibt es auch viele Lösungen, die nicht austauschbar sind, da dieser fragt, wie ein Bild vergrößert werden soll, während dieser fragt, wie ein Bild verkleinert werden soll.
TylerH
1
001 - Dies ist eine Antwort auf Ihre gestellte Frage, die geschlossen wurde, bevor ich sie gesehen habe. So rufen Sie eine untergeordnete Komponente von einer übergeordneten Komponente auf. Ich habe einen Blog-Beitrag geschrieben, in dem erklärt wird, wie Komponenten über Schnittstellen kommunizieren: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Antworten:

1876

Wenden Sie keine explizite Breite oder Höhe auf das Bild-Tag an. Geben Sie es stattdessen:

max-width:100%;
max-height:100%;

Auch height: auto;wenn Sie nur eine Breite angeben möchten.

Beispiel: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Kevin
quelle
40
Dadurch werden weder Höhe noch Breite skaliert.
Neil
75
Höhe: Auto; Wenn Sie nur eine Breite angeben möchten
Roi
82
Was ist, wenn das Bild zu klein ist?
Scott Rippey
18
@Scott Rippey - Wenn das Bild kleiner als der Container ist, ändert es sich nicht, da die verwendeten Regeln die maximale Breite und die maximale Höhe sind.
Surreale Träume
15
Mit einem umschließenden <a>Tag wurde die Bildgröße nicht geändert. Das Anwenden der Regeln auf das A-Tag löste dieses Problem.
SPRBRN
433

Objektanpassung

Es stellt sich heraus, dass es einen anderen Weg gibt, dies zu tun.

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

wird die Arbeit machen. Es ist CSS 3 Zeug.

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

Shih-Min Lee
quelle
39
Dadurch wird das Bild so skaliert, dass es der größeren Dimension vollständig in den Container passt, sodass die kleinere Dimension es möglicherweise nicht vollständig abdeckt. Um stattdessen die größere Dimension object-fit: cover
Gabriel Grant
4
Hat bei mir funktioniert - im Vergleich zur Lösung von @KevinD - hat dies die Proportionen in Randfällen NICHT verändert. Prost!
Barnabas Kecskes
9
Wird großartig sein, wenn es voll unterstützt wird. Atm, weder IE noch Edge unterstützen es leider.
Spektren
2
Wenn Sie die maximale Breite und Höhe einstellen möchten, können Sie dies tun. Funktioniert perfekt .
Sandip Subedi
3
Scheint, dass nicht mit IE11 und Rand 14/15 verwendet werden kann, obwohl -> caniuse.com/#search=object-fit
mcorbe
106

Derzeit gibt es bei Bildern mit fester Größe wie JPEGs oder PNG-Dateien keine Möglichkeit, dies deterministisch korrekt durchzuführen.

Um die Größe eines Bildes proportional zu ändern, müssen Sie entweder die Höhe oder die Breite auf "100%" einstellen , aber nicht beide. Wenn Sie beide auf "100%" einstellen, wird Ihr Bild gestreckt.

Die Wahl der Höhe oder Breite hängt von Ihren Bild- und Behälterabmessungen ab:

  1. Wenn Ihr Bild und Ihr Container beide "Hochformat" oder beide "Querformat" sind (größer als breit oder breiter als hoch), spielt es keine Rolle, welche Höhe oder Breite "% 100" sind. .
  2. Wenn Ihr Bild im Hochformat und Ihr Container im Querformat ist, müssen Sie height="100%"das Bild festlegen .
  3. Wenn Ihr Bild im Querformat und Ihr Container im Hochformat ist, müssen Sie width="100%"das Bild festlegen .

Wenn es sich bei Ihrem Bild um eine SVG-Datei handelt, bei der es sich um ein Vektorbildformat mit variabler Größe handelt, kann die Erweiterung für den Container automatisch erfolgen.

Sie müssen nur sicherstellen, dass für die SVG-Datei keine dieser Eigenschaften im <svg>Tag festgelegt ist:

height
width
viewbox

Die meisten Vektorzeichnungsprogramme legen diese Eigenschaften beim Exportieren einer SVG-Datei fest, sodass Sie Ihre Datei bei jedem Export manuell bearbeiten oder ein Skript schreiben müssen, um dies zu tun.

Neil
quelle
2
Ist es nur ich oder gibt es einige Fehler in diesem Beitrag? "'porträtförmig' oder beide 'landschaftsförmig' (breiter als sie groß sind und größer als sie breit sind)" ... sollten Ihre "Respektvollen" nicht vertauscht werden? Und in Ihren Aufzählungspunkten 2. und 3. sagen beide "Sie müssen width =" 100% "für das Bild festlegen". Ich vermute, Sie haben kopiert und vergessen, eine davon in "Höhe" anstatt in "Breite" zu ändern.
Buttle Butkus
Habe es einfach behoben. 2 und 3 können jetzt beide falsch oder beide richtig sein, anstatt dass einer falsch und einer richtig ist. Ich kann mich nicht erinnern, was die richtige Antwort ist. ;)
Neil
2
"Derzeit gibt es bei Bildern mit fester Größe wie JPEGs oder PNG-Dateien keine Möglichkeit, dies deterministisch korrekt zu tun." Das scheint einfach falsch zu sein. @ Thorn007 Antwort bietet so, und ich habe es selbst verwendet - stackoverflow.com/questions/12259736/…
Dan Dascalescu
Die Antwort von @DanDascalescu Thorn007 erweitert das Bild nicht, wenn es kleiner als der Container ist. Die beste Lösung besteht heutzutage darin, ein Element mit einem Hintergrundbild zu verwenden und festzulegen background-size: contain.
Kevin Borders
"Um die Größe eines Bildes proportional zu ändern, müssen Sie entweder die Höhe oder die Breite auf" 100% "einstellen, aber nicht beide." <Genau das hat mir geholfen. Vielen Dank
Alexander Santos
77

Hier ist eine Lösung, die Ihr Bild sowohl vertikal als auch horizontal innerhalb eines Divs ausrichtet, ohne es zu dehnen, 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);
    }
Demütiges Grollen
quelle
1
CSS funktioniert genau so, wie ich es will, und ich habe das jQuery-Bit übersprungen
bkwdesign
48

Mach es einfach!

Geben Sie dem Container einen festen height und setzen Sie dann für das darin enthaltene imgTag widthund max-height.

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

Der Unterschied besteht darin, dass Sie width100 auf 100% setzen, nicht auf max-width.

Mehdi Maghrooni
quelle
2
Dies führt dazu, dass sich das Bildverhältnis in Google Chrome ändert, wenn das Bild sehr groß und das Ansichtsfenster kurz ist.
Mikko Rantalainen
29

Ein wunderschöner Hack.

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

  1. Wenn ein Bild ein Hintergrundbild ist.
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://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>

Führen Sie es hier aus


Aber man sollte imgTag verwenden, um Bilder zu platzieren, da es besser ist als background-imagein Bezug auf SEO, da man Schlüsselwörter in altdas imgTag schreiben kann . Hier können Sie das Bild reaktionsfähig machen.

  1. Wenn sich das Bild im imgTag befindet.
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Führen Sie es hier aus

Siraj Alam
quelle
23

Sie können das Bild als Hintergrund für ein Div festlegen und dann die Eigenschaft CSS-Hintergrundgröße verwenden :

background-size: cover;

Es wird "Skalieren Sie das Hintergrundbild so groß wie möglich, damit der Hintergrundbereich vollständig vom Hintergrundbild abgedeckt wird. Einige Teile des Hintergrundbilds sind möglicherweise nicht im Hintergrundpositionierungsbereich sichtbar" - W3Schools

Chuck trocknet
quelle
Ich glaube, mit "fit a div container" bedeutete das OP, dass das Bild in beiden Dimensionen nicht über das enthaltende Element hinausgehen sollte. In der Lösung von @JonatasWalker wird das Bild zugeschnitten. Abhängig von der Situation ist eine Hintergrundlösung möglicherweise auch nicht semantisch korrekt. Beispielsweise benötigen Sie möglicherweise altWerte und dergleichen (obwohl Sie auch ein Dummy-Bild hinzufügen können, das für Technologien ohne Assistenten unsichtbar ist), oder Sie müssen es möglicherweise anklickbar machen.
Balázs
@ Balázs ah in diesem Fall wäre die richtige Einstellung background-size: containund ich denke, ich würde persönlich die Dummy-Bildroute gehen, nur weil es keinen wirklich einfachen Weg gibt, das hier beschriebene ohne JavaScript zu tun
Chuck Dries
@ChuckDries Ich bin mir nicht sicher, was du meinst, die akzeptierte Antwort löst das Problem.
Balázs
22

Schauen Sie sich meine Lösung an: http://codepen.io/petethepig/pen/dvFsA

Es ist in reinem CSS ohne JavaScript-Code geschrieben. Es kann Bilder jeder Größe und Ausrichtung verarbeiten.

Angesichts eines solchen HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

Der CSS-Code wäre:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}
dmitry
quelle
2
Dies behandelt keine zu kleinen Bilder.
Josh C
1
@JoshC Was meinst du? Dieser funktioniert gut: codepen.io/petethepig/pen/maeFo
dmitry
2
404 auf den Bildern, die zu klein sind.
Josh C
Ich wollte darauf hinweisen, dass diese Methode auch mit Containern mit variabler Breite funktioniert. Großartige Arbeit, Dmitry!
Camilo Martin
Eine leichte Modifikation und ist perfekt: codepen.io/anon/pen/BoQmBw Danke Dmitry.
Alqin
10

Ich habe gerade ein jQuery-Plugin veröffentlicht, das mit vielen Optionen genau das tut, was Sie brauchen:

https://github.com/GestiXi/image-scale

Verwendungszweck:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});
Nicolas BADIA
quelle
10

Diese Lösung streckt das Bild nicht und füllt den gesamten Container, schneidet jedoch einen Teil des Bildes.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}
Miia Klingstedt
quelle
9

Ich sehe, dass viele Leute eine Objektanpassung vorgeschlagen haben, was eine gute Option ist. Aber wenn Sie möchten, dass es auch in älteren Browsern funktioniert , gibt es eine andere Möglichkeit, dies einfach zu tun.

Es ist ganz einfach. Der Ansatz, den ich gewählt habe, bestand darin, das Bild mit Absolut im Container zu positionieren und es dann mit der Kombination genau in der Mitte zu platzieren :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Sobald es in der Mitte ist, gebe ich dem Bild,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Dadurch erhält das Bild den Effekt von Object-Fit: Cover.


Hier ist eine Demonstration der obigen Logik.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Diese Logik funktioniert in allen Browsern.

Furqan Rahamath
quelle
8

Folgendes funktioniert perfekt für mich:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
Chong Lip Phang
quelle
7

Ich habe eine viel bessere Lösung ohne JavaScript. Es ist voll ansprechbar und ich benutze es oft. Sie müssen häufig ein Bild eines beliebigen Seitenverhältnisses an ein Containerelement mit einem bestimmten Seitenverhältnis anpassen. Und es ist ein Muss, wenn diese ganze Sache voll ansprechbar ist.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Sie können die maximale Breite und Höhe unabhängig voneinander einstellen. Das Bild berücksichtigt das kleinste (abhängig von den Werten und dem Seitenverhältnis des Bildes). Sie können das Bild auch so einstellen, dass es wie gewünscht ausgerichtet wird (z. B. können Sie ein Produktbild auf einem unendlichen weißen Hintergrund leicht in der Mitte unten positionieren).

Actimel
quelle
5

Geben Sie dem div, das das <img> -Tag enthält, die Höhe und Breite ein, die Sie für Ihr Bild benötigen. Vergessen Sie nicht, die Höhe / Breite im richtigen Stil-Tag anzugeben.

Geben Sie im <img> -Tag das max-heightund max-widthals 100% an.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Sie können die Details in den entsprechenden Klassen hinzufügen, nachdem Sie es richtig gemacht haben.

AZD
quelle
5

Der folgende Code wurde aus früheren Antworten übernommen und von mir anhand eines Bildes mit dem Namen getestet storm.jpg.

Dies ist der vollständige HTML-Code für eine einfache Seite, auf der das Bild angezeigt wird. Dies funktioniert perfekt und wurde von mir mit www.resizemybrowser.com getestet. Fügen Sie den CSS-Code oben in Ihren HTML-Code unter Ihrem Kopfbereich ein. Geben Sie den Bildcode an einer beliebigen Stelle ein.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>
Dan
quelle
5
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>
easd
quelle
2
Wenn Sie eine Erklärung für Ihren Code hinzufügen könnten, wäre das nett (ich weiß, dass Sie dort einige Kommentare haben, aber nur ein paar Worte darüber, warum / wie dies die Frage beantwortet, würde es viel besser aussehen lassen).
Anzeigename fehlt
5

Sie müssen dem Browser mitteilen, in welcher Höhe Sie ihn platzieren:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
Rick
quelle
5

Bearbeiten: Die vorherige tabellenbasierte Bildpositionierung hatte Probleme in Internet Explorer 11 ( max-heightfunktioniert nicht in display:tableElementen). Ich habe es durch eine Inline-basierte Positionierung ersetzt, die nicht nur in Internet Explorer 7 und Internet Explorer 11 funktioniert, sondern auch weniger Code erfordert.


Hier ist meine Sicht auf das Thema. Es funktioniert nur, wenn der Container eine bestimmte Größe hat ( max-widthund max-heightnicht mit Containern auszukommen scheint, die keine konkrete Größe haben), aber ich habe den CSS-Inhalt so geschrieben, dass er wiederverwendet werden kann ( picture-frameKlasse hinzufügen) und px125Größenklasse zu Ihrem vorhandenen Container).

In CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Und in HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO


Bearbeiten: Mögliche weitere Verbesserung mit JavaScript (Hochskalieren von Bildern):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});
jahu
quelle
Die Verwendung dieser Methode hat einen Nachteil. Wenn das Bild nicht geladen werden kann, wird Alternativtext mit dem übergeordneten Container angezeigt line-height. Wenn altern Text mehr als eine Zeile hat, wird es wirklich schlecht aussehen ...
jahu
5

Ich habe dieses Problem mit dem folgenden Code behoben:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}
Serkan KONAKCI
quelle
4

Wie hier beantwortet , können Sie auch vhEinheiten verwenden, anstatt, max-height: 100%wenn dies in Ihrem Browser nicht funktioniert (wie Chrome):

img {
    max-height: 75vh;
}
gaborous
quelle
1
Meinst duvh ? und was funktioniert in Chrome nicht?
MisterManSam
@misterManSam Ja, vielen Dank, war gestern zu müde, als ich diese Antwort gepostet habe. max-height: xx%(prozentuale Einheit) funktioniert in Chrome nicht mit einigen Elementen wie img, aber vhEinheit funktioniert. Allerdings Prozent arbeiten mit height, width, max-widthetc.
gaborous
4

Ich habe ein Bild innerhalb eines Hyperlinks sowohl horizontal als auch vertikal proportional zentriert und skaliert:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Es wurde in Internet Explorer, Firefox und Safari getestet.

Weitere Informationen zum Zentrieren finden Sie hier .

Bancer
quelle
4

Die akzeptierte Antwort von Thorn007 funktioniert nicht, wenn das Bild zu klein ist .

Um dies zu lösen, habe ich einen Skalierungsfaktor hinzugefügt . Auf diese Weise wird das Bild größer und der div-Container gefüllt.

Beispiel:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Anmerkungen:

  1. Für WebKit müssen Sie -webkit-transform:scale(4); -webkit-transform-origin:left top;den Stil hinzufügen .
  2. Mit einem Skalierungsfaktor von 4 haben Sie eine maximale Breite = 400/4 = 100 und eine maximale Höhe = 200/4 = 50
  3. Eine alternative Lösung besteht darin, die maximale Breite und Höhe auf 25% einzustellen. Es ist noch einfacher.
user217447
quelle
1
Dies ist keine sehr zuverlässige Lösung, wenn Sie versuchen, den gesamten Markt zu unterstützen. Ich meide CSS3, es sei denn, Sie haben eine Art Fallback für Browser, die dies nicht unterstützen.
Dudewad
4

Wenn Sie Bootstrap verwenden, müssen Sie nur die img-responsiveKlasse zum imgTag hinzufügen :

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Bootstrap-Bilder

HoangYell
quelle
3

Eine einfache Lösung (4-Schritt-Korrektur !!), die für mich zu funktionieren scheint, finden Sie unten. In diesem Beispiel wird die Breite verwendet, um die Gesamtgröße zu bestimmen. Sie können sie jedoch auch umdrehen, um stattdessen die Höhe zu verwenden.

  1. Wenden Sie das CSS-Styling auf den Bildcontainer an (z. B. <img>).
  2. Stellen Sie die Eigenschaft width auf die gewünschte Bemaßung ein
    • Verwenden Sie %für Bemaßungen die relative Größe oder die automatische Skalierung (basierend auf dem Bildcontainer oder der Anzeige).
    • Verwenden Sie px(oder eine andere) für eine statische oder festgelegte Dimension
  3. Stellen Sie die Höheseigenschaft so ein, dass sie basierend auf der Breite automatisch angepasst wird
  4. GENIESSEN!

Zum Beispiel,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
junger Chisango
quelle
3

Alle bereitgestellten Antworten, einschließlich der akzeptierten, funktionieren nur unter der Annahme, dass der divWrapper eine feste Größe hat. So geht's, unabhängig von der Größe des divWrappers, und dies ist sehr nützlich, wenn Sie eine reaktionsfähige Seite entwickeln:

Schreiben Sie diese Erklärungen in Ihren DIVSelektor:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Fügen Sie dann diese Erklärungen in Ihren IMGSelektor ein:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

SEHR WICHTIG:

Der Wert maxHeightmuss das sein gleiche sowohl für die DIVund IMGWähler.

Billal Begueradj
quelle
1
Die korrekte CSS-Deklaration lautet im Fall eines Kamels "max-height" und nicht "maxHeight".
Mark Townsend
3

Eine einfache Lösung ist die Verwendung von Flexbox. Definieren Sie das CSS des Containers wie folgt:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Stellen Sie die enthaltene Bildbreite auf 100% ein und Sie sollten ein schönes zentriertes Bild im Container erhalten, wobei die Abmessungen erhalten bleiben.

Mateo Marin
quelle
1

Die Lösung ist einfach mit ein bisschen Mathematik ...

Fügen Sie das Bild einfach in ein div und dann in die HTML-Datei ein, in der Sie das Bild angeben. Stellen Sie die Werte für Breite und Höhe in Prozent ein, indem Sie die Pixelwerte des Bildes verwenden, um das genaue Verhältnis von Breite zu Höhe zu berechnen.

Angenommen, Sie haben ein Bild mit einer Breite von 200 Pixel und einer Höhe von 160 Pixel. Sie können mit Sicherheit sagen, dass der Breitenwert 100% beträgt, da es sich um den größeren Wert handelt. Um dann den Höhenwert zu berechnen, teilen Sie einfach die Höhe durch die Breite, was den Prozentwert von 80% ergibt. Im Code sieht es ungefähr so ​​aus ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>
user2796283
quelle
1

Der einfachste Weg, dies zu tun, ist die Verwendung von object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Wenn Sie Bootstrap verwenden, fügen Sie einfach die img-responsiveKlasse hinzu und ändern Sie zu

.container img{
    object-fit: cover;
}
Joseph Lariosa
quelle
-1

Oder Sie können einfach verwenden:

background-position:center;
background-size:cover;

Jetzt nimmt das Bild den gesamten Raum des Div ein.

Sharifur Robin
quelle
1
Es geht nicht um die Ausrichtung, sondern um die Größenänderung.
Baljeetsingh