响应式web设计--图片

使用width属性

   如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：

	
		
		 
		 
		
	
	
		
		
调整浏览器窗口查看图像是如何扩展的。
	

   注意在以上实例中，图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。

 

使用max-width属性

   如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：

	
		
		 
		 
		
	
	
		
		
调整浏览器大小，在宽度小于 460px 时查看图片比例变化。
	

网页中添加图片

	
		
		 
		 
		
	
	
		

			
Chania
		

		

			

			

				
The Flight
				
The City
				
The Island
				
The Food
			
		

		

			
The City
			
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
			
		

		

			

				
What?
				
Chania is a city on the island of Crete.
				
Where?
				
Crete is a Greek island in the Mediterranean Sea.
				
How?
				
You can reach Chania airport from all over Europe.
			
		

		

		

			
调整浏览器窗口大小查看内容变化。
		
	

背景图片

   背景图片可以响应调整大小或缩放。

   以下是三个不同的方法：

   1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：

	
		
		 
		 
		
	
	
		
调整浏览器大小查看效果。
		

	

   2. 如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

	
		
		 
		 
		
	
	
		
调整浏览器大小查看效果。
		

	

    3. 如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

	
		
		 
		 
		
	
	
		
调整浏览器大小查看效果。
		

	

不同设备显示不同图片

    大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。

   以下大图片和小图片将显示在不同设备上：

	
		
		 
		 
		
	
	
		
调整浏览器宽度，背景图片在小于 400 px 时将改变。
	

    你可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。

	
		
		 
		 
		
	
	
		
调整浏览器宽度，背景图片在小于 400 px 时将改变。
	

 

 

 

HTML5 元素

   HTML5 的  元素可以设置多张图片。

浏览器支持

元素
	不支持	38.0	38.0	不支持	25.0

    元素类似于  和  元素。可以设备不同的资源，第一个设置的资源为首选使用的：

	
		
		 
		 
		
	
	
		
			
			
			
		

		
调整浏览器宽度和高度，背景在宽度小于 400px 时将改变。 
	

    srcset 属性的必须的，定义了图片资源。

     media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。

    对于不支持  元素的浏览器你也可以定义  元素来替代。

 

参考：

https://www.yuque.com/docs/share/3af131d4-ea2e-4fe1-85b9-2ae8ed4f2749