点击这里下载源代码
效果显示：
要求：
1。尽可能的兼容更多的浏览器，这是兼容IE6和IE7，不支持最大*。
当2的大小。浏览器更改时，图片总是等于拉伸或缩放的比例。
3的div。包图片也响应，每个div的大小是相同的。
4。这幅画总是保持水平垂直。
5个数。图片是一样的，总是3×3。
这里有一些要求。
满足需求1意味着尽可能不使用高级浏览器，例如在高级浏览器中常用的浏览器。
显示：表格单元格；垂直对齐；中心；
flexbox
变换
。
如果你必须使用这些属性，你必须有一个低版本浏览器的替代品。
很容易确保图片ISO拉伸扩展在2是很容易放置在响应设计。
对图片img {最大宽度是正确的：100%；}。即使外面的宽度小于图片宽度，图片将填补外部div同时计算出图像的高度。
你可以看到图片的大小为640×480（4:3），和外面的div设置为300px，和图片的尺寸是300×225（4:3）。
然后，浏览器的大小在2中有了变化，这也是很容易的，外部div的宽度是100%。
可以看出，不管外面的div大小如何变化，图像的宽高比都没有改变。
然后是3，外部div响应。
第一个反应是设置大小的百分比。例如，顶部效果，一行有三张图片。每个包的div宽度设置为33.3%。在那个时候，div也会像它里面的图片一样，缩放或拉伸，而div的高度将是不均匀的。
的…
* {
保证金：0；
填充：0；
}
李{
列表样式类型：无；
显示：内联块；
垂直对齐：中间；
马克斯：200px宽度；
宽度：32%；
border: 1px solid红；
}
img {
马克斯宽度：100%；
马克斯身高：100%；
显示：内联块；
垂直对齐：中间；
}
#包{
马克斯：620px宽度；
字体大小：0；
}
你可以看到，第一张图片的高度已经超过200px，因为第一张照片是小于高度。显然，它应该是基于高度和宽度的比例。如果图片中的父元素有溢出，则隐藏；不能看到大的猪。
那么，怎样才能使外部div响应呢
填料顶部：100%；
…
* {
保证金：0；
填充：0；
}
李{
列表样式类型：无；
浮点数：左；
显示块；
马克斯：200px宽度；
宽度：32%；
border: 1px solid红；
}
假{。
填料顶部：100%；
}
#包{
马克斯：620px宽度；
字体大小：0；
}
在宽度和高度的比为1:1，如果长宽比为4:3，它被设置为填充顶：75%；和其他人都是这样的。
3的要求是要完成的，以下是要求4。
先把照片放进去。
在这一点上，让图片从文档流中消失并传播整个图片。
img {
位置：绝对；
顶部：0；
底部：0；
左：0；
权利：0；
马克斯宽度：100%；
马克斯身高：100%；
显示块；
保证金：0汽车；
边境：2px固蓝；
}
同时，包裹图片div位置：相对；
注意上面的图片空白：0个自动的，它已经在图片中间了。
以下是只有一个图像垂直于中间，并要求5通过在最外层的div设置最大宽度设置一排列
有很多方法获得垂直中心，但这里的图片位置：绝对，很容易想到设置保证金：自动和填充：自动，它可以使图像的文件流垂直水平。
但这种方法是不是有效的IE7。所以才加一层分到图片的外面
这是一个非常常见的垂直中心法。
img {
马克斯宽度：100%；
马克斯身高：100%；
显示：内联块；
垂直对齐：中间；
}
我{
显示：内联块；
垂直对齐：中间；
身高：100%；
}
注意，当标签设置高度：100%，否则，在IE7中，标签有无参考高度，使其无法达到相同的高度作为外部容器。
以上内容是CSS图片响应垂直水平中心的全部内容，希望大家喜欢。
