HTML-Bildlayout mit PHP-Variablen, die dynamisch mit JavaScript [o. . .]

Question

"O" soll ein Bild auf einer HTML-Seite darstellen. Hier ist meine HTML-Seite auf einer Bildschirmgröße> X, wobei X eine bestimmte Anzahl von Pixeln ist:

OOOO

OOOO

OOOO

Es gibt, sagen wir, 12 Bilder; jedoch, wenn auf einer Bildschirmgröße ≤ X gesehen sollten wir erhalten:

OO

OO

OO

OO

OO

OO

Die Seite PHP auf folgende Weise verwendet:

<?php 
    $images = glob("images/*.jpg"); 
    foreach($images as $image){ 
     <!-- <img...width:25%;display:inline-block;.../> --> 
    } 
?> 

Ich mag die „25“ in diesem Prozent einer Variable abhängig machen, ob das Ansichtsfenster X ≤ oder> X; sagen wir, w1 falls> X und w2 wenn ≤ X. Gibt es eine Möglichkeit dies ohne JavaScript zu tun? Ich werde jedoch eine JavaScript-Antwort akzeptieren.

---

„...“ bedeutet, dass es mehr gibt, aber ich bin es nicht hier zeigt.

Answer 1

Sie können CSS-Medienabfragen verwenden, um zu erreichen, was Sie wollen:

/* default values */ 
img.class-name { 
    width: 25%; /* whatever your default value is */ 
} 

@media (min-width: YYpx) { 
    img.class-name { 
    width: 50%; /* value when the screen is at least YY px wide */ 
    } 
} 

Medienanfragen werden nur in IE unterstützt 9+

Answer 2

Versuchen csswidth Satz auf ein Minimum px oder eine andere Einheit Wert mit Plus 15vw bis abhängig vom erwarteten gerenderten Skalierungseffekt; Einstellung display-inline-block, height zu 25vh

body { 
    width:100%; 
    height: 100%; 
    padding:4px; 
} 

img { 
    display:inline-block; 
    width:calc(50px + 15vw); 
    height:25vh; 
    border: 1px solid #000; 
    padding:4px; 
} 

jsfiddle https://jsfiddle.net/wgjvq3b9/