0

我一直在涉足响应式网页设计。我正在尝试更改我现有的网站，以便它可以在移动设备和桌面设备上运行。我一直在查看 Internet 上的一些示例，例如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;
}   
 }

我试过了，但图像似乎没有缩放，但我不确定这是否只是因为我一开始没有正确创建图像。（我不是平面设计师）。

谢谢！

4

1 回答 1

1

解决方案 1：CSS 媒体查询

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

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

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

包含：

该关键字指定背景图像在确保其尺寸小于或等于背景定位区域的对应尺寸的同时，应尽可能地进行缩放。

根据您正在处理的图像类型，您还可以尝试使用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，最大高度和宽度为 100 像素，质量级别为 80%。

于 2012-11-08T20:39:56.627 回答