Web | Corporate | Print | Illustration
Blogkategorien:

Responsive Image mit 100% Höhe - CSS Lösung

  • Web
  • Sven Zinke
  • 20.05.2015
  • Tags: CSS

Bei responsive Spaltenlayouts hat man das Problem, daß die Spalten beim zusammenschieben immer höher, die Bildhöhe aber immer kleiner wird. Das sieht dann so aus:

<  >
>  <
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Soll das Bild in der linken Spalte immer so hoch sein wie der Text in der rechten, kann man das mit etwas CSS lösen. Die einfachste Variante ist sicherlich das Bild einfach als background-image mit background-size: cover; zu setzen. Wenn man das jedoch nicht will, bietet sich folgende Lösung an. Die Spalten selbst müssen dafür die gleiche Höhe haben, sonst funktioniert es nicht.

<  >
>  <
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HTML

  1. <div class="imagefullheight">
  2. <img src="bild.jpg">
  3. </div>

CSS

  1. .imagefullheight {
  2. position: relative;
  3. overflow: hidden;
  4. height: 100%;
  5. width: auto;
  6. }
  7.  
  8. .imagefullheight img {
  9. position: absolute;
  10. min-width: 100%;
  11. min-height: 100%;
  12. width: auto;
  13. height: auto;
  14. top: 50%;
  15. left: 50%;
  16. transform: translate(-50%,-50%);
  17. }

Wie man sehen kann wird nur ein Ausschnitt des Bildes angezeigt. Der Grund dafür ist, daß das Bild beim ändern der Höhe nicht direkt grobpixelig werden soll. Hier muß man bei jedem Bild individuell entscheiden wie groß das Orginalbild sein soll. Am besten probiert man aus welche max. Breite und welche max. Höhe jeweils benötigt wird und schneidet das Bild entsprechend zurecht.