webentwicklung-frage-antwort-db.com.de

Responsive Image Vollbild und zentriert - Seitenverhältnis beibehalten, Fenster nicht überschreiten

Ich möchte also, dass eine img angezeigt wird 

  • so groß wie möglich (Füllen der Breite im Querformat/Höhe im Hochformat)
  • keine Ernte
  • keine Schräglage oder Dehnung (ursprüngliches Seitenverhältnis)
  • sowohl vertikal als auch horizontal zentriert

Die Originalgröße des Bildes ist ebenfalls nicht bekannt.

Ich habe schon einige Optionen ausprobiert, einschließlich einer Flexbox (um die vertikale Mitte zu erhalten), aber nichts scheint alle Kästchen anzukreuzen.

Im Idealfall möchte ich natürlich, dass dies eine reine CSS-Lösung ist, aber ich habe mich auch mit JS beschäftigt.

Vielen Dank

csscss3responsive-design
28
sanjaypoyzer

jsFiddle Demo

Pro jeho vycentrování můžete použít zde ukázanou techniku: Absolutní centrování .

Aby to bylo co největší, uveďte max-width a max-height100%.

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}
72
Itay

Sie können stattdessen ein div mit einem Hintergrundbild und diese CSS3-Eigenschaft verwenden:

background-size: contain

Sie können ein Beispiel unter:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

Um Mozilla zu zitieren:

Der include-Wert gibt an, dass das Hintergrundbild unabhängig von der Größe des umschließenden Felds so skaliert werden sollte, dass jede Seite so groß wie möglich ist, wobei die Länge der entsprechenden Seite des Containers nicht überschritten wird.

Denken Sie jedoch daran, dass Ihr Bild vergrößert wird, wenn div größer ist als Ihr Originalbild.

3
dcro

Nach langem Ausprobieren stellte ich fest, dass dies meine Probleme gelöst hatte. Dies wird verwendet, um Fotos auf einem Fernsehgerät über einen Browser anzuzeigen.

  • Es behält das Seitenverhältnis der Fotos bei
  • Skalen in vertikaler und horizontaler Richtung
  • Zentriert vertikal und horizontal 

  • Das einzige, worauf Sie achten sollten, sind wirklich breite Bilder. Sie dehnen sich bis zum Rand aus, aber nicht viel, Standard-Kamera-Fotos werden nicht geändert.

    Versuche es :)

* bisher nur in chrom getestet

HTML:

<div class="frame">
  <img src="image.jpg"/>
</div>

CSS:

.frame {
  border: 1px solid red;

  min-height: 98%;
  max-height: 98%;
  min-width: 99%;
  max-width: 99%;

  text-align: center;
  margin: auto;
  position: absolute;
}
img {
  border: 1px solid blue;

  min-height: 98%;
  max-width: 99%;
  max-height: 98%;

  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
1
James Siebert