php 中的服务器端和客户端浏览器宽度和 bootstrap 轮播问题

Question

我正在尝试找出一种方法来根据浏览器宽度使用服务器端和客户端（或者可能只是客户端？）端代码来执行此操作。我想要做的是从 bootstrap 中获取轮播并使用服务器中的图像填充幻灯片部分。

当浏览器只有一个大小时，这很容易做到，它是一个简单的 sql 查询和一个循环。

但现在想象一下，您可以有一张 1024+ 的图像，一张 768 像素的图像，一张 480 像素的图像，最后一张 320 像素的图像（这些都是相同的图像，只是宽度不同）。我将如何使用 php 和 css 创建一个轮播来加载一张 1024+ 的图像，然后一旦你下降到 768px，它就会将该图像换成一个合适的尺寸，同样适用于 480 和320.

除了存储图像，我没有尝试过任何其他方法，因为老实说，我什至不确定如何处理这个问题。

你会如何完成这个？

Answer 1

是否可以选择在 CSS 中使用媒体查询？尽管 content: url(...) 动态图像在所有浏览器中都不受支持，但您可以使用 background url() 属性一个 div.

给大家一个印象：

@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 中的服务器端和客户端浏览器宽度和 bootstrap 轮播问题

Server side and Client side broswer width and bootstrap carousel issue in php

html

css

php

twitter-bootstrap