imgile srcsetduyarlı görüntüleri yapmanın harika bir yol gibi nitelik görünüyor. Css background-imageözelliğinde çalışan eşdeğer bir sözdizimi var mı?
HTML
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
CSS
.mycontainer {
background: url(?something goes here?);
}
Yanıtlar:
image-seteşdeğer CSS özelliğidir. Spesifikasyona eşdeğer srcset işlevselliği (kaynakları boyutlarına göre tanımlama) eklemeliyiz.
Şu anda yalnızca Safari, Chrome ve Opera'da -webkit-önek ile uygulanmaktadır ve yalnızca xtanımlayıcıları desteklemektedir .
xtanımlayıcıları desteklemek anlamsız görünebilir, yani bir arka plan görüntüsü 2x 'retina' masaüstünde (5120w) tam genişlikte olabilir; bu, mobil cihazlarda 2x (720w) hızda herhangi bir mobil cihaz için web sayfası olarak bile düşünülmesi gereken gülünç boyutlu bir görüntü olabilir. arka fon. Birkaç farklı boyut sunmak için maksimum genişlikte medya sorguları kullanmak bile o kadar yardımcı olmaz, çünkü arka plan kapsayıcısının maksimum genişliği değil, ekranın maksimum genişliği.
Oldukça eminim:
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
aynı şekilde çalışır. Tarayıcı resimleri inceleyecek, hangisinin en uygun olduğunu görecek ve onu kullanacaktır.
Açıkçası daha sağlam olan başka bir yaklaşım, arka plan görüntülerinin özelliklerini ve seçeneklerini srcset özelliğine sahip bir görüntüye uyarlamak olacaktır.
Bunu yapmak için görüntüyü genişliğe ayarlayın:% 100; yükseklik:% 100; ve nesne uyumu: örtün veya kaplayın.
İşte bir örnek:
.pseudo-background-img-container {
position: relative;
width:400px;
height: 200px;
}
.pseudo-background-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}<div class="pseudo-background-img-container">
<img class="pseudo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px">
</div>Bu herkes için en iyi yaklaşım olmayabilir, ancak herhangi bir javascript geçici çözümü olmadan istenen sonuçların çoğunu alacağını tahmin ediyorum.
Bir çoklu dolgu için, doğru görüntü boyutunu indirmek için bir mekanizma olarak srcset içeren bir img kullanabilir, ardından bunu gizlemek ve bir ana öğenin arka plan görüntüsünü ayarlamak için JS'yi kullanabilirsiniz.
İşte bir keman: http://jsbin.com/garetikubu/edit?html,output
onloadJS'yi bir engelleme komut dosyası olarak kullanmak ve yerleştirmek <head>önemlidir. Betiği daha sonra koyarsanız (örneğin sonunda <body>), img.currentSrc'nin tarayıcı tarafından henüz ayarlanmadığı bir yarış durumu elde edebilirsiniz. Yüklenmesini beklemek en iyisidir.
Örnek, indirilmekte olan orijinal resmi görmenizi sağlar. Biraz CSS ile kolayca gizleyebilirsiniz.
Medya sorgularını amacınız için kullanabilirsiniz. Bu kadar kolay:
.mycontainer {
background-image:url("img/image-big.jpg"); // big image
}
@media(max-width: 768px){
.mycontainer {
background-image:url("img/image-sm.jpg"); // small image
}
}
Ve medya sorgularını destekleyen her tarayıcıda çalıştığını düşünüyorum;)
<picture>Element kullanarak benzer çözüm :
Burada öğretici
Eğiticinin durumu:
Aynı görüntüyü daha küçük bir ekran boyutu için kullanırsam, görüntümün ana nesnesinin boyut olarak çok küçük olabileceğinden şüpheliyim. Farklı bir ekran boyutunda farklı bir görüntüyü (birincil konuya daha fazla odaklanmış) görüntülemek istiyorum, ancak yine de aygıt-piksel oranına göre aynı görüntünün ayrı varlıklarını görüntülemek istiyorum ve yüksekliğini ve genişliğini özelleştirmek istiyorum. görüntü alanına dayalı görüntü.
Örnek kod:
<picture>
<source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x,
images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x">
<source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x,
images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x">
<img src="space-needle.jpg" alt="Space Needle">
</picture>
Foundation framework kullanıyorsanız ( https://foundation.zurb.com/ ), bunun için Interchange eklentisini kullanabilirsiniz:
<div data-interchange="[assets/img/interchange/small.jpg, small],
[assets/img/interchange/medium.jpg, medium],
[assets/img/interchange/large.jpg, large]">
</div>
https://foundation.zurb.com/sites/docs/interchange.html#use-with-background-images
responsive-loaderOldukça tatlı bir çözüm için bunu web paketlerinin yanında güzelce bağladım .
@Weston'ın cevabına dayanarak, daha genel bir jQuery çözümü oluşturdum, temelde sadece JS ve CSS'yi kopyalayıp yapıştırabilir ve HTML kısmına odaklanabilirsiniz;)
... yüklenirken resimlerin zorlukla görünmesini sağlamak için
.srcSet{
position: fixed;
z-index: 0;
z-index: -1;
z-index: -100;
/* you could probably also add visibility: hidden; */
}
Bu komut dosyası, alan (veya desteklenmiyorsa) ve sınıfla en yakın ebeveyni CSS olarak koyan srcSetclass ve bind loadolayına sahip tüm görüntüleri gözden geçirir .currentSrcsrcbackground-imagebgFromSrcSet
Bu tek başına yeterli olmaz! Bu nedenlewindow load, yükleme olaylarının tamamlanıp tamamlanmadığını test etmekiçinolayabir aralık denetleyicisi koyar, yoksa onları tetikler. (img loadOlay çok sık tetikleyen edilir sadece ilk kez yük yükler aşağıdaki üzerine, resim kaynağı, önbellekten alınan edilebilir img yük durumunda ortaya çıkan DEĞİL kovuluyor! )
jQuery(function($){ //ON DOCUMENT READY
var $window = $(window); //prepare window as jQuery object
var $srcSets = $('.srcSet'); //get all images with srcSet clas
$srcSets.each(function(){ //for each .srcSet do...
var $currImg = $(this); //prepare current srcSet as jQuery object
$currImg
.load(function(){ //bind the load event
var img = $currImg.get(0); //retrieve DOM element from $currImg
//test currentSrc support, if not supported, use the old src
var src = img.currentSrc ? img.currentSrc : img.src;
//To the closest parent with bgFromSrcSet class,
//set the final src as a background-image CSS
$currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");
//remove processed image from the jQuery set
//(to update $srcSets.length that is checked in the loadChecker)
$srcSets = $srcSets.not($currImg);
$currImg.remove(); //remove the <img ...> itself
})
;
});
//window's load event is called even on following loads...
$window.load(function(){
//prepare the checker
var loadChecker = setInterval(function(){
if( $srcSets.length > 0 ) //if there is still work to do...
$srcSets.load(); //...do it!
else
clearInterval(loadChecker); //if there is nothing to do - stop the checker
}, 150);
});
});
... şöyle görünebilir:
<div class="bgFromSrcSet">
<img class="srcSet"
alt=""
src="http://example.com/something.jpeg"
srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w"
sizes="(max-width: 2000px) 100vw, 2000px"
>
Something else...
</div>
Not: Sınıf bgFromSrcSetgerekir değil ayarlanmalıdır imgkendisi! Yalnızca imgDOM ana ağacındaki öğelere ayarlanabilir .