Asp.net：不同屏幕分辨率的可变图像源

Question

有没有办法为不同的屏幕分辨率选择不同的图像源？

类似于媒体查询，但仅适用于图像

<img src="@<variable source for variable screen res.>@" />

节省一些服务器带宽并增加手机或小屏幕的加载时间。

我有一个用于高清屏幕的 1800x900 图像，需要为另一个屏幕选择 900x300 版本。

对于滑块中的那些大背景图片，会导致过多的服务器负载和时间和金钱。

Answer 1

使用 HTML：

（来源：http://css-tricks.com/on-responsive-images/）

<picture alt="description of image">

  <!-- low-res, default -->
  <source src="small.jpg">

  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">

  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">

</picture>

这是 HTML 5 的一个相当新的实验性功能，请参阅 http://caniuse.com/#feat=picture

使用 JavaScript：

有几个插件可以解决这个问题：

• PictureFill
• jQueryPicture
• Foresight.Js

使用 CSS：

用<div id="picture"></div> 替换IMG 元素：

#picture {
     background-repeat: no-repeat;
     background-size: 100%;
}

@media (min-width: 800px) {
   #picture { background-image: url('small.jpg'); width: (SMALL_WIDTH); height: (SMALL_HEIGHT); }
}

@media (min-width: 1200px) {
   #picture { background-image: url('medium.jpg'); width: (MEDIUM_WIDTH); height: (MEDIUM_HEIGHT); }
}

@media (min-width: 1400px) {
   #picture { background-image: url('large.jpg'); width: (LARGE_WIDTH); height: (LARGE_HEIGHT); }
}

使用服务器端解决方案：

• http://squeezr.it/ (PHP)
• http://adaptive-images.com/ (PHP)