Bild mit einer bevorzugten Breite, min-Breite und max-width

Question

Ich habe ich ein Bild, das mit zunehmender Bedeutung entsprechend die folgenden Regeln skalieren würde:

• normalerweise eine Breite von 38% aufweist (des Elternteils/Bildschirms);
• nicht kleiner als 300px werden;
• nie größer als 100% werden (der Eltern/Bildschirm) (nur ein Problem, wenn die Eltern/Bildschirm kleiner als 300px ist;

Das heißt: das Bild nur einen Prozentsatz der verfügbaren nimmt Bei sehr kleinen Bildschirmen (mobilen Geräten) darf das Bild jedoch niemals die volle Breite des verfügbaren Platzes überschreiten, selbst wenn dies bedeuten würde, dass es unter die minimale Breite schrumpft.

Ich dachte, ich könnte dies mit den folgenden css tun:

img { 
    width: 38%; 
    min-width: 300px; 
    max-width: 100%; 
} 

denken, dass die max-width würde Vorrang vor der min-width, weil es später erscheint. Aber es funktioniert nicht ... Das Bild erscheint als der erforderliche Prozentsatz und schrumpft nicht unter 300px. Auf einem kleinen Bildschirm (< 300px) wird das Bild jedoch nicht angezeigt (Bildlaufleisten werden angezeigt).

Lesen Sie die Dokumentation, min-width overrides max-width, also sollte ich dies kommen sehen haben ...

Eine offensichtliche Lösung wäre, eine Medien-Abfrage hinzuzufügen:

@media screen and (max-width: 300px) { 
    img { 
     min-width: 0; 
     width: 100%; 
    } 
} 

Allerdings Ich mag wäre in der Lage sein, Überschreiben der Breitenspezifikationen (dh der 38% oder der 300px Werte) aus dem HTML (Tag Stil).

Mehrere Fragen zu SO Touch zum Thema Sizing, aber ich konnte keinen über meinen genauen Fall finden. Jeder hier mit einer Lösung/Vorschlag?

Einige Neben Anforderungen:

• sollten in gängigen Browsern arbeiten, html5/css3
• kein Javascript (wenn sich herausstellt, dass es nur mit CSS nicht möglich ist, werde ich eine js Lösung schaffen, aber ich keine js bevorzugen für diesen)
• keine Medienanfragen (siehe oben)
• ich die Kontrolle über den hTML-Code bin, so im Inneren zusätzlichen Elementen Verschachtelung ist in Ordnung, wenn
benötigt

Answer 1

Wenn min-widthmax-width überschreibt, dann ist die Lösung, min-width nicht auf einen Wert zu setzen, der größer als die Fensterbreite werden kann.
Mit anderen Worten, tauschen Sie die Werte für width und min-width um. Dann brauchen Sie keine Medienabfragen oder JavaScript.

img { 
 
    width:300px; 
 
    min-width:38%; 
 
    max-width:100%; 
 
}

<p><img src="https://placehold.it/999x333"/></p> 
 
<p><img src="https://placehold.it/999x333" style="width:400px"/></p>

In diesem Beispiel sind beiden Bilder nie kleiner als 38% und nicht größer als 100% des Fensters, und das erste Bild 300 x vorzieht, während die zweiten 400px vorzieht.

(Beachten Sie, dass die Bilder selbst sagen, dass sie „999 × 333“ sind;. Sie sollten das ignorieren)