Problem

Question

Ich versuche, einen Vollbild -Diashow -Effekt zu erzielen JSFIDDLE -Code hier, aber ich habe Zweifel, wie es geht. Wie aus meiner Beispielgeige hervorgeht, möchte ich, dass das Bild so groß wie möglich ist, ohne es zu verzerren (fit zum Bildschirm). Ich möchte auch, dass es vertikal und horizontal zentriert ist.

Horzontales Zentrieren Es wird in CSS gepflegt, aber ich musste JavaScript für die vertikale Zentrierung verwenden.

Meine Fragen sind:

1. Gibt es einen besseren Weg, dies zu tun (z. B. alle in CSS)?
2. Wenn das Bild (bevor es skaliert wurde), ist bei der ersten Last breiter als das Ansichtsfenster, eine Bildlaufleiste ist vorhanden, während mein Skript die Höhe des Ansichtsfensters berechnet. Dies bedeutet, dass, wenn mein Skript zum Div und IMG zum Fenster passt, am Boden eine weiße Lücke liegt, das ist die Höhe der Bildlaufleiste. Ich kann dies umgehen, indem ich Überlauf angibt: versteckt, aber es scheint ein bisschen wie ein Arbeit zu sein. Gibt es einen besseren Weg? Wäre das Bild besser?
3. Wenn ich die Größenordnung so die DIV als breiter ist als das Bild, bekomme ich einen weißen Abschnitt unter der schwarzen Div, der eine vertikale Scrollbar erzeugt. Wieder kann ich das mit Überlauf loswerden: versteckt, aber ich mag diesen Ansatz nicht. Ich möchte wissen, warum es da ist und wie ich es loswerden kann?
4. Manchmal kann ich eine horizontale Scrollbar erscheinen lassen und wenn ich die Größe der Größe verändert, blinkt sie ein/aus. Überlauf: Hidden behebt dies, aber ich möchte eine sauberere Lösung.
5. Gibt es bessere Möglichkeiten, dies zu codieren, oder kann mein JQuery/JavaScript weiter optimiert werden?

Answer 1

Nun ... das ist schwierig. Ich habe am besten festgestellt, wie ich dies tun kann, um Ihren Inhalt tatsächlich in eine einzelne Zelltabelle zu setzen und die vertikalen und horizontalen Eigenschaften auf ... in der Mitte und in der Mitte zu setzen, denke ich? Aber trotzdem kann es getan werden. Ich werde damit herumspielen und sehen, ob ich zusammen ein Beispiel bekommen kann.

BEARBEITEN:

Ok, das erste, was ich empfehlen würde, ist, den Browser proportional die Größe der Dinge zu ändern. Sie müssen nicht die Größe des Divs ändern, nur das Bild. Sie können den Browser auch die vertikale Ausrichtung herausfinden lassen, was eine viel bessere Option ist als die Berechnung. Dies kann durch Platzieren des Inhalts in einer einzelnen Zelltabelle erfolgen. Der folgende Beispielcode ist reines HTML und CSS. Sie können den Effekt etwas hinzufügen, dass Sie bereits die Bildhöhe und die Breite zwischen 100% automatisch und automatisch 100% basierend auf der IMG -Höhe und der Fensterhöhe aufweisen müssen. Hoffentlich bringt dich das ein wenig näher an dein Ziel.

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

Answer 2

Mir ist keine Cross -Browser -Lösung in reinem HTML/CSS bekannt, um das zu erreichen, was Sie verlangt haben. Jedes Element mit einem Seitenverhältnis und einer Flüssigkeitsbreite löst eine "Rennbedingung" aus, wenn der Browser beschließt, die Bildlaufleiste zu zeigen / auszublenden. Ein Browser zwingt eine Scrollbar, wenn er diese Situation mit Elementen unter seiner Kontrolle erkennt. Dies kann auch mit JavaScript simuliert werden. Ich habe auch dieses Problem gestoßen und eine kleine Bibliothek erstellt:

https://github.com/ocbnet/layout

Es gibt auch eine Demo, die implementiert, was das OP verlangt:

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

Answer 3

1. Ja (für den 100% Höhenteil): html,body,div {height:100%}
2. Überlauf: Hidden scheint mir nett zu sein. Andere mögliche Lösungen:
   1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (document.write sollte jedoch vermieden werden)
   2. <img src="" width="1" height="1" /> (dh eine kleine Standardgröße definieren -> Keine Scrollbar)
   3. @Gerben Vorschlag: CSS max-Width (am besten)
3. Scheint der Raum zu sein, den die horizontale Scrollbar benötigen würde. Ich erhalte dieses Problem nur mit einer bestimmten Größe+Verhältnis.
4. Dies ist der Zeitpunkt, an dem das Pictureratio gleich oder ziemlich nahe am Fulldivratio ist. Ich kann Hoo nicht mit Überlauf finden: versteckt.
5. Keine Ahnung, scheint gut genug imo zu sein.

Also ja, die seltsame Scrollbar bei der Größenänderung erfolgt aufgrund des Grenzeffekts, die Scrollbar wird angezeigt, wenn Sie aus dem wechseln if zum else oder umgekehrt.

Mit Diese jsfiddle Ich bekomme nie eine horizontale Scrollbar, aber von Zeit zu Zeit werde ich immer noch vertikal.

Answer 4

Du kannst das:

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

Es ist alles reines HTML und CSS. Eine Alternative zu Josephs Antwort auf die Verwendung von Tabellen, wenn Sie keine Tabelle in Ihrer Struktur verwenden möchten.