Wie wird die Bildbreite basierend auf bestimmten Größenbeschränkungen des Containers auf 100% gesetzt?

Question

Die Bilder können breiter als die Breite ihres Containers oder kleiner als diese sein. Um die Breite größerer Bilder zu steuern, kann ich max-width: 100% verwenden. Ebenso kann ich auch width:100% für kleinere Bilder einstellen.

Gibt es eine Möglichkeit, die Bildbreite nur dann auf 100% zu setzen, wenn das Originalbild mindestens 50% seiner Containerbreite beträgt? Ich werde eine CSS-basierte Lösung bevorzugen, wenn sie existiert, weil die Bilder dynamisch geladen werden.

Answer 1

Da die Bilder dynamisch geladen werden, denke ich, dass dein bester Schuss mit Javascript ist. Sie müssen die Breite des Bildes ermitteln (Determine original size of image cross browser?), und dann können Sie das mit dem übergeordneten Element des Bildes vergleichen und bestimmen, ob es über oder unter 50% liegt.

UPDATE:

die Frage Anbetracht hat jeden Beispielcode nicht zur Verfügung stellen, will ich nicht zu erraten nur. Aber würde der Pseudo-Code wie folgt aussehen:

// after ajax completes 
var image = jQuery('.image'), 
parent = image.parent(); 
if (image.width() * 2 >= parent.width()) { 
    image.css('width','100%'); 
} 

Answer 2

var containerDiv = $(".container"); 
var image = $(".img"); 
image.width(image.width()>containerDiv.width()?containerDiv.width():image.width());