Probleme unter Safari mit responsive images

Unter Safari gibt es Probleme mit responsive images, die eine maximale Breitangabe von 100% haben:

max-width: 100%;

Dies führt unter Umständen dazu, dass diese nicht angezeigt werden, bzw. eine Höhe von 0 Pixel haben.

Umgehen kann man das Problem mit folgenden Anweisungen:

@media screen and (-webkit-min-device-pixel-ratio:0) {
	img {
		max-width: 100%;
		height: auto;
		width: auto;
	}
}

Sven Wappler

Webentwickler, TYPO3ler, Hobby-Fotograf

Das könnte Dich auch interessieren...

6 Antworten

  1. Kurt Kunig sagt:

    Hall Sven,
    DANKEEEEEEEEEEEE!!!!!!!!!!!!
    DAS war’s – Puh, das Problem hat Zeit gekostet. Ich habe leider beim Googeln danach nichts gefunden!? Kennt Google diese Seite denn nicht?
    Gruß aus Jülich
    Kurt Kunig

  2. Sven Wappler sagt:

    Keine Ahnung. Erst seitdem du geantwortet hast, kommen welche über Google auf die Seite.

  3. Chris sagt:

    Danke für den Beitrag, hat mir weiter geholfen!
    Daran habe ich gar nicht gedacht es so zu lösen.

    lg,
    Chris

  4. Sven sagt:

    WOW! Danke !! Hat mir viel Zeit gekostet, danke für den tollen Artikel.

  5. Sascha sagt:

    Super. Genau das wars! DANKE

  6. GGuido sagt:

    …wie ich meinen Job manchmal hasse =) thx for sharing!!
    Beste Grüße
    Guido

Schreibe einen Kommentar