[英]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?
This is where my banner image is stored, in the 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");
});
``` ```
I want to add another version of the banner image for mobile and other screen sizes. 我想为移动和其他屏幕尺寸添加横幅广告图像的另一个版本。 Do I add them in the javascript here? 我可以在这里的javascript中添加它们吗? How do I link everything in my media queries? 如何链接媒体查询中的所有内容?
You are using the jQuery plugin, Backstretch. 您正在使用jQuery插件Backstretch。
A quick look at the documentation at https://github.com/jquery-backstretch/jquery-backstretch shows that this is a built in feature. 快速浏览https://github.com/jquery-backstretch/jquery-backstretch上的文档,可以发现这是一个内置功能。 Just pass an array of images and widths. 只需传递图像和宽度的数组即可。
// 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.