我正在建立一个网站,但我遇到了问题。我在屏幕的整个宽度上制作了一个滑块,但我希望使用较小的图像以获得较小的分辨率,并使用较大的图像以获得较大的分辨率。我的滑块中的图像是用html编写的。这可能,我该怎么做?
这是我的网站:http://www.yannickluijten.be
答案 0 :(得分:1)
您应该调查CSS媒体查询。它们允许您根据浏览器的属性(包括窗口大小)设置特定样式(或导入不同样式表)。
答案 1 :(得分:0)
根据您的最新评论,我建议采用以下解决方案。
使用媒体查询,如其他答案(尽管只有CSS3支持)或:
我可能会使用javascript。检测用户屏幕分辨率,然后根据屏幕分辨率将src插入图像标签。您可以将分辨率范围的地图保留为img srcs。
答案 2 :(得分:0)
我的建议是取消愚蠢的img
代码,而是使用带有背景图片的div
s。但是,如果您坚持使用img
代码,我想您可以像这样保存图片:
./ |-- some_image_1024x500.png |-- some_image_512x250.png |-- another_image_1024x500.png |-- another_image_512x250.png |-- third_image_1024x500.png |-- third_image_512x250.png |-- ...
然后为图像标签添加一个特殊类,它应根据窗口大小更改图像分辨率,例如<img class="width-sensitive" src="images/some_image_1024x500.png" />
然后编写一个JavaScript函数来检查窗口大小并执行图像源替换,例如(使用jQuery伪代码):
// This function is terribly unDRY and ugly but it's just an example
function process_image_sizes() {
var images = $('img.width-sensitive');
if($(window).width() > 800) {
images.each(function(index, element) {
var src = $(element).prop('src');
if(/512x250\.png$/.test(src)) {
$(element).prop('src', src.replace('512x250', '1024x500'));
}
}
}
else {
images.each(function(index, element) {
var src = $(element).prop('src');
if(/1024x500\.png$/.test(src)) {
$(element).prop('src', src.replace('1024x512', '512x250'));
}
}
}
}
然后在页面加载时运行该函数一次:
$(function() { process_image_sizes(); });
每当窗口调整大小时:
$(window).on('resize', process_image_sizes);
我希望这有所帮助。