响应式图片

1、响应式图片

1、内容图片响应

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式使用百分比，来进行控制图片缩放：

以上代码将图像强制占据其父元素空间的100%，当父元素宽度改变时图像元素也会相应改变，而高度默认为auto,图像自身宽高比例不会发生变化，宽高按照其宽高比进行放大

以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示

2、背景图片处理

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

background-size属性值设置为百分比值或cover,contain等，将实现背景图片的大小跟随元素大小响应变化。

• cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）

• contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）

2、响应式文字

相对单位在文字的应用可以一定程度上提升效率精简代码