媒体查询/根据屏幕大小加载不同的图像 [英] media queries / loading different image depending on screen size
问题描述
这可能是基本的，但是我在网络上找到的所有解决方案中都迷失了。
我有一个运行的网站（www.webstalab.com）基于Twitter Bootstrap 3，但使用的图像（描绘两个雕像持有一个球）是相当大的大小（大约900kb），因此加载方式太长时间较慢的互联网连接。
当前照片宽1920像素，响应速度快，不是背景图片。 （我无法用背景图片方法实现所需的布局）。
This might be basic but I'm getting lost in all the solutions I've managed to find on the web. I have a running website (www.webstalab.com) based on Twitter Bootstrap 3 but the image used (depicting two statues holding a ball) is quite big in size (around 900kb) therefore loads way too long on slower internet connections. The present photo is 1920 pixels wide, is responsive and it is not a background image. (I couldn't achieve the desired layout with the background image approach).
我想要做的是创建3个不同尺寸版本的同一张照片宽，一个大约1200px宽，保持原始在1920px宽），并让浏览器加载适当的版本的图像，这取决于什么屏幕尺寸和分辨率用于查看网站。我还计划将原始（1920像素宽）照片的大小缩小一些，以便加载更快一些。
All I want to do is create 3 different size versions of the same photo (one around 800px wide, one around 1200px wide and keep the original at 1920px wide) and get the browser load the appropriate version of the image depending on what screen size and resolution is used to view the website. I also plan to cut the size of the original (1920 pixels wide) photo a bit so it loads a bit faster.
我想CSS3媒体查询是一种方式有了这个？
媒体查询还能解决视网膜显示问题吗？
任何人都可以提出一篇介绍基础知识的文章？
我想要一个没有javascript的解决方案（以防万一用户关闭它）。
网站是在线的，因此您可以检查源代码。
I suppose CSS3 media queries is the way to go with this? Will media queries also solve the retina display issue? Can anyone suggest a good article covering the basics? I'd prefer a solution without javascript (just in case the user has it switched off). The website is online so you can check the source code.
Thanx all！
Thanx all!
推荐答案
如果你使用 img 标签来显示图片，那么你需要一个JS解决方案。
If you use the img tag for showing the image, then yes, you will need a JS solution.
因此，如果您想使用媒体查询，则需要使用图片作为背景，例如 div 标签：
So if you want to use media queries, you will need to use the images as a background on for example a div tag:
例子是没有retina显示处理，但这里是一篇关于处理的文章：
Retina显示媒体查询
The example is without retina display handling, but here is an article on handling that: Retina Display Media Queries
这篇关于媒体查询/根据屏幕大小加载不同的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
