Klaus: Bild als Vollbild, aber nur wenn groß genug

Beitrag lesen

Hallo,

wie kann ich ein Bild nur dann im Vollbild (des Browsers) zeigen, wenn es von der Auflösung groß genug ist?
Ich habe ein DIV, dass die volle Größe des Browserfensters einnimmt. Darin möchte ich ein einziges Bild zentriert reinsetzen, das auf die volle Größe des DIV angezeigt werden soll, aber nur wenn die Auflösung des Bildes größer oder gleich der Auflösung des Browserfensters ist.
Das Problem ist, dass ältere Bilder eine geringere Auflösung haben als neuere und die Bilder sowohl im Hochformat als auch im Querformat vorliegen.

Kann ich das mit reinem CSS realisieren?

Im Moment wird jedes Bild mit den Originalabmessungen des Bildes gezeigt.

So sieht der HTML-Code aus:

  
<div id="photo_container">  
   <div id="theimage"><img src="<?=$bild;?>"></div>  
</div>  

So sieht mein CSS aus:

  
#photo_container {  
	position: absolute;  
	top: 0px;  
	left: 0px;  
	width: 100%;  
	height: 100%;  
	margin: 0 auto;  
    background-color:#000;  
}  
#theimage img {  
	width: 100%;  
	height: 100%;  
}