CSS - 如何使响应图像 [英] CSS - how to make responsive images

问题描述

我一直在使用响应式网页设计。我试图更改我现有的网站，以便它可以在移动设备上以及在桌面上工作。我一直在查看互联网上的一些示例，如 http://2012.inspireconf.com/ 。 / p>

我的问题是 - 当涉及到图像...什么是适当的方式，使它们缩放到不同的浏览器大小？我在我的css中尝试了以下测试：

  @media only screen and（max-width：980px）{
 .hero-unit {
 background：url（../ img / 1.jpg）100％不重复; 
 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％不重复; 
 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只有屏幕和（max-width：980px）{
。hero-unit {
 background：url（../ img / 1.jpg）40％不重复; 
 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; 
} 
} 
  

我试过这个，规模，但我不知道，如果它只是因为我没有正确地创建图像在第一位。 （我不是平面设计师）。

谢谢！

解决方案

h2>解决方案1：CSS媒体查询

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

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

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

包含：

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

根据您处理的图片种类，您也可以尝试使用封面 background-size 属性的关键字。 p>

封面：

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

示例：

  background-size： 
  

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

---

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

如果您关心带宽，您应该根据分辨率调整服务器端的照片

有一个名为自适应图片这在我的服务器端对PHP工作相当不错。

---

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

如果您懒惰地设置，您可以尝试第三方服务，例如 mobify.com API 。换句话说，我将其称为调整大小为服务。

示例：

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

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

I've been just dabbling with responsive web design. I'm trying to change my existing site so that it wil work on mobile devices as well as on a desktop. I've been reviewing some examples on the internet such as http://2012.inspireconf.com/.

My question this - when it comes to images... what's the proper way to make them scale to different browser sizes? I've tried the following test in my 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;
}   
 }

The image files are just simple pictures with different numbers - starting from 1-4. This was just to give me a visual queue as to which image file is being loaded. As I resize my browser on my desktop, i can see that my media queries are working... the different images are being loaded.

But then it struck me that if i were doing this for a real site, this would mean that I would have to create 5 different versions of the same picture!

So is the "proper" way to do this to create one massive picture / image, and then shrink it as I go along? Meaning, should my css look like this instead:

 @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;
}   
 }

I tried this but the image didn't seem to scale but I'm not sure if it's just because I didn't create the image properly in the first place. (I'm not a graphic designer).

Thanks!

解决方案

Solution 1: CSS Media Queries

If you don't care about bandwidth for devices which will match a smaller resolution you could just work with this solution.

It's not necessary to override the same css properties for every media query. You can set border, margin, padding etc. once for .hero-unit and all the media queries will inherit from it.

The background-size property has the contain keyword. It scales images to fit in the container. The background image resizes proportionally.

contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Depending on the kind of images your're dealing with you could also try to experiment with the cover keyword of background-size property.

cover:

This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Example:

background-size: contain;

I also set up a working demo for you here http://jsfiddle.net/qBuzR/5/

---

Solution 2: Javascript and Server Side resizing (self hosted)

If you care about bandwidth you should resize the photos on the server side depending on the resolution the clients will request.

There is a library called Adaptive Images which works quite good with PHP on the server side for me. I guess you can find libraries for any language you need.

---

Solution 3: Javascript and Server Side resizing (Third party)

If you're lazy to setup you could try a third party service like mobify.com API. In other words I would call it Resizing-as-a-Service.

Example:

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

This API call transforms the image to image format JPG with quality level of 80% at maximum height and width of 100px.

这篇关于CSS - 如何使响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！