html – 如何在css中指定不同的图像,具体取决于用户在桌面或移动浏览器上的访问

概述只是关于移动设备的CSS的问题, 我的网站上有一个1260像素宽的图像,当我在手机上看时,它会破坏网站,因为网站的其余部分是基于960像素的布局. 我已经将这些图像的宽度设计为960像素的移动设备,但是我如何在css中指定,如果它是移动使用移动优化的图像,而不是常规网站上的图像. 所以基本上如果一个用户在桌面电脑上的网站上,它会显示1260像素的图像 如果他们在移动设备上访问该网站,它将显示960 只是关于移动设备的CSS的问题,

我的网站上有一个1260像素宽的图像,当我在手机上看时,它会破坏网站,因为网站的其余部分是基于960像素的布局.

我已经将这些图像的宽度设计为960像素的移动设备,但是我如何在CSS中指定,如果它是移动使用移动优化的图像,而不是常规网站上的图像.

所以基本上如果一个用户在桌面电脑上的网站上,它会显示1260像素的图像

如果他们在移动设备上访问该网站,它将显示960像素的图像

任何想法家伙？

解决方法 我不知道如果你想要Js,我决定回答你的问题,如果你想要 CSS3,尝试这样：

HTML：

<img src="image.jpg"     data-src-960px="image-960px.jpg"     data-src-1260px="image-1260px.jpg"     alt="">

CSS：

@media (min-device-wIDth:320px) {        img[data-src-960px] {            content: attr(data-src-960px,url);        }    }    @media (min-device-wIDth:960px) {        img[data-src-1260px] {            content: attr(data-src-1260px,url);        }    }

jquery版本：

$(document).ready(function() { function imageresize() { var contentwIDth = $('#content').wIDth(); if ((contentwIDth) < '960'){ $('.imageclass').attr('src','image-960px.jpg'); } else { $('.imageclass').attr('src','image-1260px.jpg'); } } imageresize();//Activates when document first loads  $(window).bind("resize",function(){ imageresize(); }); });

总结

以上是内存溢出为你收集整理的html – 如何在css中指定不同的图像,具体取决于用户在桌面或移动浏览器上的访问全部内容，希望文章能够帮你解决html – 如何在css中指定不同的图像,具体取决于用户在桌面或移动浏览器上的访问所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。