[英]How do I add different sizes of the same image to a homepage banner in my media queries when the banner image is stored in javascript?
這是我的橫幅圖片存儲在javascript中的位置:
```
/*
Background slideshow
*/
$('.top-content').backstretch("assets/img/backgrounds/Banner_1024 x 768.jpg");
$('.testimonials-container').backstretch("assets/img/backgrounds/testimonial1.jpg");
$('a[data-toggle="tab"]').on('shown.bs.tab', function(){
$('.testimonials-container').backstretch("resize");
});
```
我想為移動和其他屏幕尺寸添加橫幅廣告圖像的另一個版本。 我可以在這里的javascript中添加它們嗎? 如何鏈接媒體查詢中的所有內容?
您正在使用jQuery插件Backstretch。
快速瀏覽https://github.com/jquery-backstretch/jquery-backstretch上的文檔,可以發現這是一個內置功能。 只需傳遞圖像和寬度的數組即可。
// Or, to automatically choose from a set of resolutions.
// The width is the width of the image, and the algorithm chooses the best fit.
$(".foo").backstretch([
[
{ width: 1080, url: "path/to/image1_1080.jpg" },
{ width: 720, url: "path/to/image1_720.jpg" },
{ width: 320, url: "path/to/image1_320.jpg" }
]
]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.