Wie kann ich die Größe eines Bildes so ändern, dass es in das Browserfenster passt?

113

Das scheint trivial, aber nach all den Recherchen und Codierungen kann ich es nicht zum Laufen bringen. Bedingungen sind:

  1. Die Größe des Browserfensters ist unbekannt. Schlagen Sie daher bitte keine Lösung mit absoluten Pixelgrößen vor.
  2. Die ursprünglichen Abmessungen des Bildes sind unbekannt und passen möglicherweise bereits in das Browserfenster.
  3. Das Bild ist vertikal und horizontal zentriert.
  4. Die Bildproportionen müssen erhalten bleiben.
  5. Das Bild muss vollständig im Fenster angezeigt werden (kein Zuschneiden).
  6. Ich möchte nicht, dass Bildlaufleisten angezeigt werden (und sie sollten nicht angezeigt werden, wenn das Bild passt.)
  7. Die Größe des Bilds wird automatisch geändert, wenn sich die Fensterabmessungen ändern, um den gesamten verfügbaren Platz einzunehmen, ohne größer als die ursprüngliche Größe zu sein.

Grundsätzlich möchte ich Folgendes:

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

Das Problem mit dem obigen Code ist, dass es nicht funktioniert: Das Bild nimmt den gesamten benötigten vertikalen Platz ein, indem eine vertikale Bildlaufleiste hinzugefügt wird.

Zu meiner Verfügung stehen PHP, Javascript, JQuery, aber ich würde für eine reine CSS-Lösung töten. Es ist mir egal, ob es im IE nicht funktioniert.

html css sebnukem
quelle
perraultarchitecte.com/de/projects/… Dies ist der gewünschte Effekt, oder? ich auch!
1
Ja, so ist es. Die Lösung, die ich oben gepostet habe, funktioniert. Sie können das Ergebnis unter eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
sebnukem
Danke, das hilft mir wirklich. Irgendwelche Vorschläge, was ich tun könnte, um zwei Bilder nebeneinander zu platzieren und die Größenänderungsfunktion beizubehalten? Danke dir.
8
Ich mag Ihre "Nichtanforderung": "Es ist mir egal, ob es im IE nicht funktioniert." :)
Bastian

Antworten:

122

Update 2018-04-11

Hier ist eine Lösung ohne Javascript und nur mit CSS . Das Bild wird dynamisch zentriert und an das Fenster angepasst.

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

Die [andere, alte] Lösung legt mithilfe von JQuery die Höhe des Bildcontainers fest ( bodyim folgenden Beispiel), sodass die max-heightEigenschaft im Bild wie erwartet funktioniert. Die Größe des Bildes wird auch automatisch geändert, wenn die Größe des Client-Fensters geändert wird.

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit { /* set relative picture size */
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html>

Hinweis: Der Benutzer gutierrezalex hat auf dieser Seite eine sehr ähnliche Lösung wie ein JQuery-Plugin gepackt.

sebnukem
quelle
6
JS ist nicht erforderlich, es gibt nur eine CSS-Lösung .
Neolisk
Auch ohne JS, alternativ Flexbox verwenden
Jason Sturges
51

Hier ist eine einfache CSS-Lösung ( JSFiddle ), die überall funktioniert, einschließlich Mobile und IE:

CSS 2.0:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

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

HTML:

<body>
  <img src="images/your-image.png" />
</body>
Neolisk
quelle
2
Nett. Aber es ist nicht vertikal zentriert.
sebnukem
1
@sebnukem: Sollte es sein? Irgendwie habe ich das bei den Anforderungen verpasst. Deshalb verwenden die Leute Screenshots / Modelle. :) PS Ich glaube, keine der Antworten macht es vertikal zentriert, selbst mit JS-Hilfe.
Neolisk
3
Ich habe viele Lösungen ausprobiert, sogar Lösungen von CSS-Tricks. Ihre funktioniert einfach perfekt wie ein Zauber!
Stephan
2
Beste Lösung aller Zeiten!
iVela
24

CSS3 führt neue Einheiten ein, die relativ zum Ansichtsfenster gemessen werden, das in diesem Fall das Fenster ist. Dies sind vhund vw, die die Höhe bzw. Breite des Ansichtsfensters messen. Hier ist eine einfache Lösung nur für CSS:

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

Die einzige Einschränkung ist, dass es nur funktioniert, wenn keine anderen Elemente zur Höhe der Seite beitragen.

Max
quelle
Danke, das ist großartig. Ist es ein Grund, warum 100vhdas Bild nicht passt, aber 97vhgut funktioniert?
Pavel
Vielleicht haben Sie andere Bilder, die zur Höhe beitragen, wie z. B. Rand und Polsterung am Körper? vhbedeutet wörtlich die Höhe der Ansicht. Wenn also andere Elemente Ihrer Seite eine Höhe hinzufügen, ist die gesamte Seite> 100vh. Ist das sinnvoll?
Max
Danke, jetzt gelöst. Wenn jemand das gleiche Problem hat ( .svgDatei wird gut gerendert, aber das Umbenennen .htmlführt zu Ungenauigkeiten): Der Browser fügt automatisch ein <body>Tag mit Standard hinzu, margin:8auch wenn die Datei kein <body>Tag hat. Also fügt die Lösung hinzu<style>body{margin:0}</style>
Pavel
15

Wenn Sie bereit sind, ein Containerelement um Ihr Bild zu platzieren, ist eine reine CSS-Lösung einfach. Sie sehen, 99% Höhe hat keine Bedeutung, wenn sich das übergeordnete Element vertikal ausdehnt, um seine untergeordneten Elemente aufzunehmen. Das übergeordnete Element muss eine feste Höhe haben, z. B. die Höhe des Ansichtsfensters.

HTML

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
    <img class='make-it-fit' 
         src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}

Spiel mit der Geige .

Mark E. Haase
quelle
Kannst du das mit einem <div>statt mit einem machen <img>?
StevoHN
@sebnukem Ich habe diese Anforderung vorher nicht bemerkt. Ich habe meine Antwort aktualisiert.
Mark E. Haase
Dies maximiert nicht die Höhe meines breiten Bildes.
Sridhar Sarnobat
4

Passen Sie die Bildgröße an den Bildschirm an der längsten Seite an und behalten Sie dabei das Seitenverhältnis bei

img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}

  • width: 100vw - Die Bildbreite beträgt 100% des Ansichtsfensters

  • height: auto - Die Bildhöhe wird proportional skaliert

  • max-height: 100vw - Wenn die Bildhöhe größer als der Ansichtsfenster wird, wird sie an den Bildschirm angepasst. Infolgedessen wird die Bildbreite aufgrund der folgenden Eigenschaft verringert

  • object-fit: contain - Der ersetzte Inhalt wird skaliert, um sein Seitenverhältnis beizubehalten, während er in das Inhaltsfeld des Elements passt

    Hinweis: object-fitwird erst seit IE 16.0 vollständig unterstützt

am0wa
quelle
1
Wie bei dieser Lösung sollten Sie jedoch erwähnen, dass die Objektanpassung nicht mit IE11 kompatibel ist, das leider immer noch weit verbreitet ist.
Blackbam
@DivijSehgal dann brauchen Sie nicht object-fitoder Sie könnten explizit verwenden, object-fit: fill;was Standard ist .
am0wa
Was ist, wenn wir vertikal zentrieren möchten?
Fmstrat
Was ist, wenn wir vertikal zentrieren möchten? Fügen Sie einfach hinzu: margin: auto;
Katze
Die Lösung arbeitet mit HTML und Body Style aus einer anderen Antwort zusammen: HTML, body {width: 100%; Höhe: 100%; Rand: 0; Polsterung: 0; }
Ivan Kovtun
3

Meine allgemeine faule CSS-Regel:

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

Dies kann Ihr Bild vergrößern, wenn es zunächst eine niedrige Auflösung hat (dies hängt mit Ihrer Bildqualität und -größe in den Abmessungen zusammen. Um Ihr Bild zu zentrieren, können Sie es auch versuchen (im CSS).

display:block;    
margin: auto 0;

um Ihr Bild zu zentrieren

in Ihrem HTML:

<div class="background"></div>
usrrname
quelle
3

Ich weiß, dass es hier bereits einige Antworten gibt, aber hier ist, was ich verwendet habe:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
TomC
quelle
Ich habe keine Ahnung warum, aber das funktioniert wie ein Zauber. Ich würde eine Erklärung lieben!
SeedyROM
Ich auch nicht, aber es war das, was ich nach langem Suchen gefunden habe.
TomC
2

Ich hatte eine ähnliche Anforderung und musste es mit grundlegendem CSS und JavaScript tun. Keine JQuery verfügbar.

Das habe ich zum Arbeiten gebracht. 

<html>
      <head>
            <style>
                   img {
                          max-width: 95% !important;
                          max-height: 95% !important;
                       }
            </style>
            <script>
                   function FitImagesToScreen() {
                      var images = document.getElementsByTagName('img');
                      if(images.length > 0){
                         for(var i=0; i < images.length; i++){
                             if(images[i].width >= (window.innerWidth - 10)){
                                 images[i].style.width = 'auto';
                               }
                            }
                         }
                   }
             </script>
      </head>
      <body onload='FitImagesToScreen()'>
      ----    
      </body>
</html>

Hinweis: Ich habe nicht 100% für die Bildbreite verwendet, da immer ein wenig Polsterung zu berücksichtigen war.

Rohit Vipin Mathews
quelle
2
Mit CSS 3 erhalten wir die Einheiten "vh" und "vw", die prozentuale Ansichtsfensterhöhe bzw. prozentuale Ansichtsfensterbreite sind. einfach img {max-width: 95vw; max-height: 95vh;} könnte ausreichen.
Bobpaul
Wenn Sie es als Antwort addieren können, kann dies für jeden nützlich sein, der später darauf zurückkommt.
Rohit Vipin Mathews
Sie können auch mehrere Bilder im sichtbaren Bereich stapeln. Fügen Sie für zwei Bilder zwei imgTags in bodydie Seite ein und setzen Sie max-heightauf 49vh. Das Anzeigen von mehr als zwei Bildern im sichtbaren Bereich bleibt als Übung für den Leser.
Andrew Beals
2

Mach es einfach. Vielen Dank

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}
<div class="bg"></div>
Erweitern Sie das Snippet

Hassan Siddiqui
quelle
Vielen Dank! füge einfach style = "height: 80vh;" im Bild-Tag hat der Trick für mich getan.
Tobias J.
1 
width: 100%;
overflow: hidden;

Ich glaube, das sollte den Trick machen.

RobinJ
quelle
Hallo, danke für Ihre Antwort, aber es funktioniert nicht und kann nicht logisch funktionieren, wenn die Bildhöhe größer als das Fenster ist.
sebnukem
1
Nun ... Was hast du vor? Möchtest du es dehnen? Oder sollten die ursprünglichen Proportionen intakt bleiben (ich nehme an, das ist, was Sie wollen)?
RobinJ
1

Aufbauend auf der Antwort von @ Rohit werden dadurch von Chrome gekennzeichnete Probleme behoben, die Größe der Bilder wird zuverlässig geändert, und es werden auch mehrere Bilder verwendet, die vertikal gestapelt sind, z. B. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> gibt es wahrscheinlich eine elegantere Möglichkeit, dies zu tun. 

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
Erweitern Sie das Snippet

Andrew Beals
quelle
0

Verwenden Sie diesen Code in Ihrem Style-Tag

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
Vaibhav Khunt
quelle