CSS - 如何制作响应式图像

Question

我一直在讨论响应式网页设计。我正在尝试更改现有网站，以便它可以在移动设备和桌面上运行。我一直在审查互联网上的一些例子，例如http://2012.inspireconf.com/。

我的问题是 - 当涉及到图像时...使它们扩展到不同浏览器尺寸的正确方法是什么？我在我的css中尝试过以下测试：

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/2.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/3.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/4.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

图像文件只是具有不同数字的简单图片 - 从1-4开始。这只是为了给我一个关于正在加载哪个图像文件的可视队列。当我在桌面上调整浏览器大小时，我可以看到我的媒体查询正在运行......正在加载不同的图像。

但后来让我感到震惊的是，如果我为一个真实的网站做这个，这意味着我将不得不创建同一张图片的5个不同版本！

这样做的“正确”方法是创建一个巨大的图片/图像，然后随着我的进展缩小它？意思是，我的css应该是这样的：

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 40% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/1.jpg") 60% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/1.jpg") 80% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

我尝试了这个，但图像似乎没有扩展，但我不确定是不是因为我没有在第一时间正确创建图像。 （我不是平面设计师）。

谢谢！

Answer 1

解决方案1：CSS媒体查询

如果您不关心与较小分辨率相匹配的设备的带宽，您可以使用此解决方案。

没有必要为每个媒体查询覆盖相同的css属性。您可以为.hero-unit设置一次边框，边距，填充等，并且所有媒体查询都将从中继承。

background-size属性具有包含关键字。它可以缩放图像以适合容器。背景图像按比例调整大小。

<强>含有：

  

此关键字指定应缩放背景图像   尽可能大，同时确保其尺寸更小   大于或等于背景的相应尺寸   定位区。

根据您处理的图片类型，您还可以尝试使用background-size属性的封面关键字进行试验。

<强>盖

  

此关键字指定应缩放背景图像   尽可能小，同时确保其尺寸更大   大于或等于背景的相应尺寸   定位区。

实施例

background-size: contain;

我还在这里为您设置了一个工作演示http://jsfiddle.net/qBuzR/5/

---

解决方案2：Javascript和服务器端调整大小（自托管）

如果您关心带宽，则应根据客户端要求的分辨率调整服务器端的照片大小。

有一个名为Adaptive Images的库，对我来说，它在服务器端的PHP上工作得很好。我想你可以找到你需要的任何语言的库。

---

解决方案3：Javascript和服务器端调整大小（第三方）

如果您懒得设置，可以尝试第三方服务，例如mobify.com API。换句话说，我称之为Resizing-as-a-Service。

实施例

http://ir0.mobify.com/jpg80/100/100/http://farm4.staticflickr.com/3113/3831295511_2c004d9059_o.jpg

此API调用将图像转换为图像格式JPG，质量级别为80％，最大高度和宽度为100px。