Question

我正在尝试使用基于浏览器宽度的服务器和客户端（或者可能只是客户端？）端代码来找到一种方法。我想要做的是从引导程序中取一个轮播，并用来自服务器的图像填充幻灯片部分。

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

但是现在想象你可以拥有1024+的图像和768的图像，480px的图像以及320px的图像（这些都是相同的图像，只是在不同的宽度）。我如何使用php和css创建一个加载一个图像1024+的carouse，然后一旦你下到768px它将该图像换成适当大小的一个，480和320相同。

我还没有尝试过任何其他的存储图像，因为老实说我甚至不确定如何处理它。

你将如何实现这一目标？

Answer 1

在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");
}    
}

使用全屏bootstrap carousell

查看this fiddle的实际操作

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

1 个答案: