css3 等比例缩放-css3实现图像容器等差缩放

实现指定容器内图片的比例缩放css3 等比例缩放，并控制上、下、左、右居中。 以前可以通过添加javascript和css2来控制。 随着css3的普及css3 等比例缩放，现在我们介绍一下通过css进行简单的控制。

具体代码如下：

.mysec{ 
    width:400px;
    height:200px;
    border:solid 1px #ccc;
    background-color:red;
    background-image:url(image/DSCI0002.JPG); /*图片地址*/
    background-origin:content;                /*从content区域开始显示背景*/
    background-position:50% 50%;              /*图片上下左右居中*/
    background-size:contain;                  /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
    background-repeat:no-repeat;              /*图像不重复显示*/
}

如果有不懂的地方，可以自己去Google搜索，搜索资料。

效果如下：

如果改变容器的大小。 例如：

将部分的宽度和高度属性更改为

宽度：200px；

高度：400px；

我们再看一下效果：

是不是有点神奇呢？ ？ 呵呵。