JavaScript ile dinamik olarak ayarlanmış PHP değişkenini kullanan HTML görüntü yerleşimi [o r. . .]

Question

"O", bir HTML sayfasındaki bir resmi temsil etsin. İşte X piksel belirli sayıda bir ekran boyutu> X benim HTML sayfası:

OOOO

OOOO

OOOO

diyelim ki, vardır, 12 Görüntüler; Ancak, ekran boyutu ≤ X bakıldığında biz almalısınız:

OO

OO

OO

OO

OO

OO

sayfası aşağıdaki şekilde PHP kullanır:

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

Ben viewport X ≤ veya olup olmadığına değişken bağımlı bu yüzde "25" yapmak istiyorum> X; diyelim, w1> X ve w2 ise ≤ X olsun. Bunu JavaScript kullanmadan yapmanın bir yolu var mı? Yine de bir JavaScript cevabını kabul edeceğim.

---

"..." Orada daha var, ama burada göstermekten değilim demektir. Ne istediğini başarmak için medya sorguları kullanabilirsiniz

Answer 1

:

/* 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 */ 
    } 
} 

Medya sorgular sadece IE 9+ desteklenmektedir

Answer 2

minimum px veya başka birim değere csswidth seti kullanmayı deneyin artı Beklenen işlenmiş ölçekleme efektine bağlı olarak- 25vw; height jsfiddle

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

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

25vh için, inline-block için display ayarı https://jsfiddle.net/wgjvq3b9/