Auto-resize Bild auf die Größe des browser

Ich habe eine Website, die "zufällig" Bilder von verschiedenen Dimensionen, einige, wenn nicht die meisten Bilder passieren nicht die Größe des browser, also würde ich gerne wissen, einen Weg, um Ihre Größe zu passen die browser-Ansicht ohne scrollen, also warum nicht die Jungs von Stack Overflow!

Offensichtlich halten Proportionen, versuchte ich https://github.com/gutierrezalex/photo-resize/ aber hat nicht funktioniert wie erwartet.
Es ist also eine html-Seite mit etwas text, das Bild in der Mitte und einige andere text unter.
Alle ich will, ist für das scrollen werden nicht in der Lage zu verwenden, da das Bild verkleinert werden soll, soviel dazu.

Sind Sie sicher, dass github.com/gutierrezalex/photo-resize nicht funktioniert? Es funktioniert bei mir: jsfiddle.net/FHq4y

InformationsquelleAutor user139944 | 2012-10-14

  1. 11

    Brauchen Sie keine JavaScript oder hacks zu erreichen, die Art der Skalierung – einfache CSS-und HTML wird nur gut funktionieren. (BTW auch auf iPad und iPhone.)

    Können Sie einfach Ihre img mit CSS-Attribut height:100%; wird, und es wird die Höhe des Vater-Knotens in den DOM-Baum. Stellen Sie sicher, dass Knoten (in der Regel ein div) werden richtig positioniert in das browser-Fenster.

    Probieren Sie etwas wie dieses:

    <div style="position:fixed; height: 100%; width: 100%; top:0;left 0;">
  <img src='whatever.png' style="height: 100%" />
</div>

    Schauen Sie sich diese Seite als demo: andrehelbig.fotograf.de. Hier das Hintergrundbild wird immer skaliert proportional zu füllen das ganze Browserfenster (nicht irritieren lassen von der JS-scrolling).

    Hoffe das gibt ein wenig Hilfe.

    andrehelbig.de - link ist kaputt. Können Sie fügen Sie ein snippet für Ihre Antwort?

    InformationsquelleAutor Stephan Hepper

  2. 0

    Alte Frage, aber für zukünftige googler, die ich geschrieben habe ein jQuery-plugin, das in der Lage ist, um die automatische Größenanpassung von Bildern mit einer Vielzahl von Optionen :

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

    InformationsquelleAutor Nicolas BADIA

  3. 0

    kannst du bitte versuchen, diesen code. Ersetzen Sie image-src, die durch Ihre Bild-Quelle.

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

$(document).ready(function() {
var h = $(window).height();
var w = $(window).width();
document.getElementById('img_canvas').style.height= h +'px';

});

</script>
</head>
<body>

<img id="img_canvas" src="images.jpg" style="width:100%;height:auto;">
</body>
</html>

    InformationsquelleAutor Bharat karotra

  4. 0

    Habe ich eine einfache Lösung.

    Klasse hinzufügen im Bild, dann die jquery verwenden, um automatisch die Größe des Bildes. hier ist es code :

    <img src="" id="imgFitWindowResize">

    nun verwenden Sie die jquery initialisieren auto die Breite, wenn der Kunde die Größe seiner browser : hier der code :

    <script type="text/javascript" language="JavaScript">
  function set_body_width() { //set body height = window height
    var wh = $(window).width();
    $(".imgFitWindowResize").width(wh);
  }
  $(document).ready(function() {
    set_body_width();
    $(window).bind('resize', function() { set_body_width(); });
  });
</script>

    Ich Versuche diesen code, es funktioniert 🙂

    InformationsquelleAutor Mahendra Wardana

Schreibe einen Kommentar