Resize img, um die Größe der Fenster zu halten Seitenverhältnis / kein überlauf auf die Höhe oder die Breite

Ich begreife, dass diese Frage gestellt wurde mehrere Male in anders lautende Titel und Optionen, aber ich habe noch etwas finden, das funktioniert für mich.

Im, der versucht zu haben eine img-füllen Sie die meisten der Bildschirm (unter Beibehaltung des Seitenverhältnisses), ohne dass die Kanten. (Im Grunde das, was den firefox-browser leistet beim betrachten eines Bildes)

Meisten, die ich probiert habe entweder funktioniert nur in einer Richtung, dh. Breite wird die Größe aber wird sich am Ende, dass die Höhe und das gleiche für die andere Weise, entweder mit CSS oder JScript. Spielt auch ein Faktor in meinem Problem ist, dass ich möchte meldest dies, um sowohl hoch-und Querformat-Bilder (Mehr oder weniger jedes Bild, das ich auf der Website)

Dieser scheint, wie es sollte funktionieren mit reinem CSS ist aber nicht (im nicht ganz kompetent in allen CSS-obwohl):

Link zu JSFiddle

body, html {
    margin:auto;
    padding:6px;
    height:100%;
    width:100%;

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

Gibt es eine hand voll andere Drehbücher als gut, aber dieser Beitrag ist schon ein wenig lang.

Könnte jemand mir helfen, mit meinen Bildern auf dem Bildschirm, entweder mit JQuery oder CSS (innerhalb oder ohne DIV)

Vielen Dank im Voraus,

  • Mann, hab ich verwechselt Versuch zu machen, dass link, sorry.
InformationsquelleAutor Aquious | 2013-04-11
  1. 1

    Versuchen dieses jQuery-plugin: TailorFit
    und check-out der demo.

    Können Sie spielen, um mit verschiedenen Optionen in der demo, um herauszufinden, ob diese für Sie arbeiten kann. Die browser-Unterstützung ist extrem, weil es nur jQuery verwendet, und die relative Positionierung.

    Vollständige Offenlegung - ich bin der Autor des plugins.

    • Das, mein Freund, ist auch verdammt nett. Krank zu buchen markieren Sie Ihre Seite für die Zukunft auf.
    • Es war mein erstes plugin und ich habe nicht berührt es in eine sehr lange Zeit. Kann beleben und verbessern bald, wenn ich weiß, dass die Leute es verwenden. 🙂
    InformationsquelleAutor rtheunissen
  2. 0

    Definieren Sie nun Ihre html, body height 100%;

    als wie diese

    body, html {
     height:100%;
}
    InformationsquelleAutor Rohit Azad
  3. 0

    MEINE ANTWORT:

    Landete ich nur die Verpackung des Bildes in eine div und der Einstellung des div-Maße in CSS:

    REINE CSS die Größe ändern

    Leider ist diese Methode Aussehen kann ganz schrecklich in älteren Browsern, aber es hat wenigstens mich aus einer Gurke und es ist ein winziges Stück von styling.

    Hoffentlich finde ich einige jQuery-alternative bald.

    body, html {
    width:98%;
    height:98%;
}
.outer {
  position:fixed !important;
  position:absolute;
  margin:auto;
  text-align:center;
  top:10px;
  right:0;
  bottom:10px;
  left:0;
}
img {
max-width:100%;
max-height:100%;    
padding:4px;
background-color:#fff;
}

----
<div class="outer">
<img src="whatever.jpg" />
</div>
    InformationsquelleAutor Aquious
Schreibe einen Kommentar