2016-03-19 25 views
-1

Farklı medya boyutu için görüntüyü yalnızca medya sorgusuyla yüklemeye çalışıyorum ancak div kapsayıcısında görüntülenmiyor; tarayıcıyı kontrol ettiğimde yükler ancak görüntülenmiyor. Ne yapıyorum bilmiyorumMedya sorgusuyla farklı ekran boyutu için resim yükleme

İşte kod.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
    <title></title> 
    <link href="css/test.css" rel="stylesheet"> 
</head> 
<body> 
<pre> 
    <script src="Jarts.js"></script> 

</pre> 
<div id="skjd2344jd"></div> 

</body> 
</html> 

burada css

var
#skjd2344jd{ 
    height: 100%; 
    width:100%; 
} 

@media only screen and (min-device-width: 480px){ 
#skjd2344jd { 
    background-image: url("../img/optimal_small.png"); 
    background-repeat: no-repeat; 
    } 
} 
@media only screen and (min-width: 481px) and (max-width: 1600px) { 
#skjd2344jd { 
    background-image: url("../img/optimal.png"); 
    background-repeat: no-repeat; 
    } 
} 
+1

gibi görünecektir. html, body {height: 100%;} 'yi eklemeyi deneyin. Aksi takdirde, div" auto "yüzdesi yüksek olduğunda görünmeyecektir ... Ayrıca, eklemeniz gerekebilir. 'head' içinde HTML viewport meta etiketi' – Aziz

+0

Üzgünüm Bir gözetim, Ben e henüz görüntülemiyorsa hepsini ekledi – emekaokoli

+0

sorununuzu yeniden üretemiyor https://jsfiddle.net/azizn/7fpb1s0m/ – Aziz

cevap

0

bunu sadece vücudunuza yüksekliğini eklemek vücudunuza Ebad ayarlayabilir ve böylece background-size:cover unutma yoktu ama% 100 genişlik ve vücudunuzun yüksekliğini alacak kimliğiniz kodunuz this