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

Posted 2023-03-05

【中文标题】Asp.net：不同屏幕分辨率的可变图像源

【英文标题】：Asp.net: Variable image source for different screen resolution

【发布时间】：2014-10-05 04:01:06

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

看一看：github.com/scottjehl/picturefill

谢谢，请问有什么不是第三方解决方案的吗？

【参考方案1】：

使用 html：

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

<picture >

  <!-- 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" >

</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)