其中CSS代码如下：

.WrapMiddle{width:100%;font-size:0;}

.Left，.Middle，.Right{display:inline-block;}

.Left{height:625px;width:20.8333%;background-color:#03a66a;}

.Middle{height:625px;width:68.75;background-color:#bbbf90;}

.Right{height:625px;width:10.4166%;background-color:#03c646;}

2.2 使用Flexbox

既有的布局技术，比如行内块、浮动等都有一定的缺陷。行内块会在html元素间渲染空白，但大多数的网站开发人员都希望把这类空白去掉。如果给浮动元素的宽度设定百分比，那么最终计算值在不同平台上的结果不一样，于是有时候某些区块会跑到其他区块下面去，而有的时候这些区块一侧又会出现一些明显的空隙。

利用Flexbox可以解决上述既有布局技术的显示机制问题，它有4个关键特性：方向、对齐、次序和弹性，可以方便地垂直居中内容，可以改变元素的显示顺序，会在盒子中自动插入空白以对齐元素。例如以下html代码可以实现一个简单的导航布局：

对应的CSS代码如下：

.MenuWrap{min-height:2.75rem;display:flex;align-items:center;padding:0 1rem;}

.ListItem{color:#efefef;margin-right:1rem;}

.LastItem{color:#efefef;margin-left:auto;}

3 响应式图片

响应式图片就是根据用户的设备和使用场景提供合适的的图片，让拥有不同分辨率的屏幕看到不同分辨率的图片，即可以根据视口大小的不同而显示不同的图片。

3.1 通过srcset切换分辨率

例如一张图片有3个不同的版本，分别对应不同的分辨率，可以通过以下代码让浏览器知道这三个版本：

< img src=”sky_”srcset=”sky_ 1.5x，sky_ 2x”alt=”sky in the summer”/>

其中src属性除了指定图片的原始大小外，还有一个作用是：当浏览器不支持srcset属性时可以当作备用图片。对于支持srcset属性的浏览器，通过不同的分辨率，浏览器可以自己决定选择哪一张图片。

3.2 通过sizes切换

在响应式网站设计中，图片在小屏幕中全屏显示，而在大屏幕中只显示图片的一半，要实现这种功能可以利用sizes属性：

< img src=”stone_”alt=”stone”srcset=”stone_ 450w，stone_ 900w”sizes=”(min-
width:17em)100vw，(min-width:40em)50vw”/>

在指定图片时，通过添加w后缀来告诉浏览器图片的宽度，在最小宽度为17em的设备中，图片显示的宽度为100vw，如果设备的宽度大于40em，则对应的图片显示宽度为50vw。

3.3 利用picture标记

如果希望为不同大小的视口提供不同的图片，还可以借助于picture元素：

< img src=””alt=”fzfu”>

其中picture元素只是一个容器，如果想给图片添加样式，还是要加到里面的img标签。source标签可以使用媒体查询明确告诉浏览器在什么条件下使用该图片。picture标签还支持提供可替换的图片格式，比如webp格式。

4 结束语

随着智能手机等移动设备的普及，用户越来越频繁地使用移动设备来浏览网站，因此如果开发人员设计出来的网站只能够在PC显示器中正确显示，而在移动设备中的浏览体验并不友好，那么将在很大程度上流失用户对该网站的关注量。响应式或移动优先的设计理念，在设计网站时已经考虑多种屏幕的尺寸以及对应的用户体验，是目前以及未来多年内网站开发技术发展的一个趋势。

以上的内容由德菁科技为您提供，转载请声明。

二、响应式图片技术的思想是什么呢

响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以Github上获取。包括一个JavaScript文件()，一个.htaccess文件，以及一些范例资源文件。大致的原理是，会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径”/rwd-
router”。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的”响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。响应式设计，就是同一个页面文件，在不同的设备端呈现不同的样子。在我看来，它的缺点有页面加载的代码多了，导致文件增大了，影响加载速度。为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码，这影响了页面加载速度。尤其是js代码，若处理不好，在配置低的机子上浏览会很卡。虽然可以通过某些技术选择性地加载响应式设计代码，但浏览器对这方面的机制支持还不够完善。在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辩率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度。虽然现在有各种智能判断设备特性而加载不同图片或视频的技术，但浏览器支持同样不够完善。对大型门户或电商网站来说，响应式设计目前确实不太适合。

三、CSS图片响应式垂直水平居中

我看最近微博流行CSS居中技术，我看了几编资料写的都不多好，于是抽时间把相关资料整合了，具体内容如下。

点击此处下载源码

效果展示：

要求:

1.尽可能兼容更多浏览器，这里兼容到ie7,ie6不支持max-*就不考虑了。

2.浏览器尺寸变化时，图片总是等比例拉伸或缩放。

3.包裹图片的div也是响应式的，并且每个div的尺寸是一样的。

4.图片始终保持水平垂直居中。

5.图片的行列数不变，这里一直都是3*3.

下面来搞定一个个要求。

满足要求1意味着这里要尽量不使用高级浏览器才有的属性，比如高级浏览器居中常用的什么

display:table-cell;vertical-align;center;flexboxtransform

。。。

如果不得不用这些属性，也必须要有兼容低版本浏览器的替代方案。

要求2中图片等比拉伸缩放在响应式设计中很容易搞定。

直接对图片img{max-width:
100%;}就可以了。外面的宽度就算设成比图片宽度小的尺寸，图片会填满外面div,同时等比例的计算出图片这时该有的高度。

可以看到图片尺寸是640 480(4:3),外面div设成300px,图片尺寸这时变为300 225(4:3).

然后是要求2里面的浏览器尺寸变化。这个也容易，把外面div的宽度写成百分百就可以了。

可以看到不管外面div尺寸怎么变，图片的宽高比始终没变。

然后是要求3,外面div响应式。

第一反应是把尺寸设置成百分百。比如最上面的效果，一行有三张图片。把每个包裹图片的div宽度设成33.3%;那这时div还会像里面的图片一样，等比例缩放或拉伸，div的高度就会参差不齐。

• …..

_{margin: 0;padding:0; } li{list-style-type: none;display:inline-
block;vertical-align: middle;max-width: 200px;width: 32%;border:1px solid red;
} img{max-width: 100%;max-height: 100%;display: inline-block;vertical-align:
middle; } #wrap{max-width: 620px;font-size: 0; }

可以看到第一张图片的高度已经超过200px,因为第一张图片是宽度小于高度，很显然这时应该以高度为基准，宽度等比例缩放。如果在图片父元素加overflow:hidden;就看不到大猪的猪脚了。

那么到底怎么做才能让外面div响应式？

padding-top:100%;

• …

_{margin: 0;padding:0; } li{list-style-type: none;float: left;display:
block;max-width: 200px;width: 32%;border:1px solid red; } .dummy{padding-top:
100%; } #wrap{max-width: 620px;font-size: 0; }

这里宽高比是1:1.如果宽高比是4:3，就设成padding-top: 75%;，其他的以此类推。

要求3是搞定，下面是要求4。

先把图片放进去。

这时让图片脱离文档流，并把图片整个铺满。

img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;max-width: 100%;max-
height: 100%;display: block;margin: 0 auto;border: 2px solid blue; }

同时把包裹图片div position:relative;

注意到上面图片margin:0 auto;,已经可以水平居中了。

下面就只差一个图片垂直居中了，要求5只需在最外面div设置一个max-width就可以设置一行的列数了。

垂直居中有很多方法，但是这里图片position:absolute;，很容易想到设置margin:auto;padding:auto;就可以让脱离文档流的图片水平垂直居中。参见Absolute
Horizontal And Vertical Centering In CSS。

但是这种方法对ie7无效。因此只有在图片外面再加一层div.

这里本屌用的是很常见的一种垂直居中的方法。

• img{max-width: 100%;max-height: 100%;display: inline-block;vertical-align: middle; } i{display: inline-block;vertical-align: middle;height:100%; }

注意，这时

标签要设置height:100%.否则在ie7中， _标签没有可以参照的高度，使得它无法达到和外部容器一样的高度。

以上内容是本文针对CSS图片响应式 垂直水平居中的全部内容，希望大家喜欢。

四、响应式网页中的图片设计技巧有哪些

答：1尽量避免使用图片说明(Captions)虽然图片说明能够让你的图片的信息更加丰富，但是它会非常直接地影响到网页的运作。尽量避免使用它们，如果实在是需要，尽量用其他的方式来呈现。图片的Caption属性加入之后，确实能在桌面端拥有良好的渲染效果，但是小屏幕上常常问题不断。为了不让这些细小的可用性的问题影响用户体验，尽量避免使用就好了。因为这种小问题而让用户无法忍受并且离去，并不划算。2图片和视频混用要小心如果网站中同时存在图片和视频类的多媒体，用户和设计者应该都是能够接受的，甚至许多用户已经习惯了这样的设计。但是要注意的是，即便是在同一个页面中，也尽量不要让图片和视频同时存在于同一个控件或者区块中。也许这样看起来很炫酷，也许一部分图片和视频能够搭配起来，但是更多的视频和图片很难在尺寸上保持一致，导致总会有一部分图片或者视频会留下空白和间隙。最好的方案还是将两者分开展示，避免了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素，而图片和视频尤甚。