我正在尝试找出一种基于浏览器宽度同时使用服务器端和客户端(或者可能只是客户端？)端代码来执行此操作的方法。我想要做的是从 bootstrap 中获取轮播，并使用来自服务器的图像填充幻灯片部分。
当浏览器只有一个大小时，这很容易做到，它是一个简单的 sql 查询和一个循环。
但现在想象一下，您可以有一张 1024+ 的图片，一张 768 像素的图片，一张 480 像素的图片，最后一张 320 像素的图片(这些都是相同的图片，只是宽度不同)。我将如何使用 php 和 css 创建一个轮播来加载一张 1024+ 的图像，然后一旦你降低到 768px，它就会将该图像换成一个合适的尺寸，同样适用于 480 和 320。
除了存储图像之外，我没有尝试过任何其他方法，因为老实说，我什至不确定如何处理这个问题。
您将如何完成此任务？
最佳答案
是否可以选择在 CSS 中使用媒体查询？尽管 content: url(...) 并非所有浏览器都支持动态图像，但您可以使用 div 的 background url() 属性。
给你一个印象:
@media (max-width: 320px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/512/256");
}
}
@media (min-width: 320px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/1024/750");
}
}
@media (min-width: 1024px) {
#slide1, #slide2, #slide3 {
background:url("http://lorempixel.com/1920/1025");
}
}
参见 this fiddle与全屏 Bootstrap 轮播一起使用
关于php - php 中的服务器端和客户端浏览器宽度和 Bootstrap 轮播问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27934000/