CSS Web production techniques: adaptive centering and compatible with pictures of (turn)

http://www.webjx.com/css/divcss-33180.html

A few days ago doing Tencent microblogging micro store when he met the needs of the middle picture needs to be done. In other words, the list of goods needs to be centered in the picture. Because the picture is the seller's own product images over the link, the size of the product images do not restrict and filter. So we need to do is to make pictures of them centered in the container horizontally, vertically centered, adaptive picture size of the container. Pictures original such a relationship between the size and the size of the display in the container:

Suppose the size of the container 200 pixels * 200 pixels, the image pixels width x, y pixel height, then:

When x <= 200, y <= 200 when the picture in the middle of the container, i.e., horizontal and vertical centering, of the container shown in the picture size: width = X, Y = high;

When x> 200, y <= 200 when the display size of the image in the container was: width = 200 High = 200y / x;

When x <= 200, y> 200, the size of the image displayed in the container was: width = 200x / y, height = 200;

When x> 200, y> 200, and x> y, the size of the image displayed in the container was: width = 200 High = 200y / x;

When x> 200, y> 200, and x <y, the size of the image displayed in the container was: width = 200x / y, height = 200;

When x> 200, y> 200, and x = y, the size of the image displayed in the container was: width = 200, height = 200;

To better see the effect, first pictures of artwork displayed, and it does so in a comparison among the list of the vessel.

x <= 200, y <= 200 image:

x> 200, y <= 200 image:

x <= 200, y> Image 200:

x> 200, y> 200, and x = y in the image:

Picture the scene adaptive centered applicable commodity lists, photo albums, picture search results lists. How to use static methods to achieve this effect? Read some of the online method, plus some of their own explanation, he made a few demo, for your reference.

使用透明图片，在该图片上设置背景图。

这种方法适用于小图片，即商品图都比容器小，不需要缩放，加载状态图片可以使用这个方法。这个方法的局限性在于，商品图片需要在服务器端过滤，或者先等比例缩小，再在浏览器端显示。

<div class="wrap_1"><a href=""><img style="background-image:url(100_100.jpg)" src="wrap_loading.png" alt=""  width="200" height="200"></a></div>

        /* 图片的背景图方式 */
		.wrap_1 { width:200px; height:200px; border:1px solid red; }
		.wrap_1 img { display:block; background-repeat:no-repeat; background-position:center; }
        

查看demo

设置display为table-cell

在img外设置两层div，最外层div的样式设置为display:table-cell。因为IE6、7中对table-cell不支持，所以 针对IE6、7，设置了position来实现居中。在IE8中，如果图片本身的宽比容器的宽大，则容器宽度会被撑开，这里使用针对IE8的width为 200px处理。

<div class="wrap_2_outer"><div class="wrap_2_inner"><a href=""><img src="100_100.jpg" alt="" ></a></div></div>

/* table-cell方式 */
.wrap_2_outer { border:1px solid red; width:200px; height:200px; display:table-cell; font-size:0; text-align:center; vertical-align:middle; *position:relative;padding:0; overflow:hidden; }
.wrap_2_inner { text-align:center; vertical-align:middle; width:200px9; *width:auto;font-size:0; *position:absolute;*top:50%;*left:50%;}
.wrap_2_inner img { max-height:200px; max-width:200px; *position:relative;*bottom:50%;*right:50%;margin:0 auto;}
        

查看demo

用与图片并列的一个空标签

设置了空标签的高，使得与它并列的。

<div class="wrap_3"><a href=""><img src="100_100.jpg" alt="" ></a><i></i></div>

/* 空标签 */
.wrap_3 { width:200px; height:200px; overflow:hidden; text-align:center; font-size:0; border:1px solid red;  }
.wrap_3 i { display:inline-block; width:0; height:100%; overflow:hidden; margin-left:-1px; font-size:0; line-height:0; vertical-align:middle; }
.wrap_3 img { vertical-align:middle; max-height:200px; max-width:200px; }
        

查看demo

设置行高line-height

对图片容器设置行高为容器的高。

<div class="wrap_4"> <img src="400_300.jpg" alt="" > </div>

/* 设置行高 */
.wrap_4 { width:200px; height:200px; text-align:center; border:1px solid red; font-family: arial; line-height:198px; font-size:0; _font-size:180px; }
.wrap_4 img { display:inline-block; vertical-align:middle; max-height:200px; max-width:200px; }
        

查看demo

以上实现的效果为：

IE6的杯具

对于图片的自适应，使用max-width和max-height。冷酷无情的现实就是IE6及以下不支持max-width和max- height。以上用于修复IE6中max-height,max-width的表达式_width和 _height，在运行时还存在小问题。用不同的图片试了一下，对于宽和高至少一个值小于或等于200的图片，能够完美地展示，但是若宽和高两者都大于 200，则会出现一些小问题。

若_width和_height两者一起使用，x>200,y>200，且x>y的图片，会显示理想的状态。x>200,y>200，且x<y的图片，会显示为200*200的大小，但是没有按比例缩放：（。

若_width、_height单独使用，则能够使对应的图片显示为理想状态。如仅使用_width，能对横图起作用，对竖图不起作用。

反之，如仅使用_height，能对竖图起作用，对横图不起作用。

The conclusion is, _width and _height are written on, so do 95 percent perfect. Also do to optimize the performance of the CSS Expression of cat brother done a detailed analysis for your reference. For IE6 plus _width: expression (function (el) {el.style.width = el.offsetWidth> 200 '200px': el.offsetWidth + 'px'; counter ( '2');?} (This)) ; phrase.

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2012/10/15/2723709.html