http://www.webjx.com/css/divcss-33180.html
彼は真ん中の絵のニーズを満たし、数日前にやってTencentのマイクロブログマイクロストアが行われる必要があります。言い換えれば、商品の一覧は、絵の中央にする必要があります。画像はリンク上で売り手の独自の製品画像ですので、商品画像の大きさが制限され、フィルタはありません。だから我々が行う必要があるコンテナのコンテナの水平方向、垂直方向の中央、適応画像サイズを中心にそれらの写真を作ることです。元の画像のサイズと容器の表示の大きさとの間のような関係。
- 次に、画像画素幅x、yのピクセルの高さ、容器のサイズ200画素×200個の画素とします。
- ときX <= 200、Y <= 200ときに画像サイズに示す容器の容器、即ち、水平方向および垂直方向のセンタリング、途中の画像：幅= X、Y =高いです。
- 場合X> 200、Y <= 200容器における画像の表示サイズがあった場合：幅= 200高= 200Y / X。
- X <= 200、Y> 200、容器内に表示される画像の大きさがあった場合：幅= 200X / Y、高さ= 200。
- 場合X> 200、Y> 200、及びX> Y、容器内に表示される画像のサイズは次の通りであった：幅= 200高= X / 200Y。
- 場合X> 200、Y> 200、及びX <Y、容器内に表示される画像のサイズは次の通りであった：幅= 200X / Y、高さ= 200。
- 場合X> 200、Y> 200、及びX = Y、容器内に表示される画像のサイズは次の通りであった：幅= 200、高さ= 200。
より良い効果を確認するには、アートワークの最初の画像が表示され、それが容器のリストの間で比較してそう。
X <= 200、Y <= 200画像：
X> 200、Y <= 200画像：
X <= 200、Y>画像200：
X> 200、Y> 200、および画像におけるX = Y：
該当商品リスト、フォトアルバム、画像の検索結果リストを中心としたシーン適応を写真。この効果を達成するための静的メソッドを使用する方法？オンライン方法のいくつかを読んで、プラス自分の説明の一部は、彼があなたの参考のために、いくつかのデモを行いました。
使用透明图片，在该图片上设置背景图。
这种方法适用于小图片，即商品图都比容器小，不需要缩放，加载状态图片可以使用这个方法。这个方法的局限性在于，商品图片需要在服务器端过滤，或者先等比例缩小，再在浏览器端显示。
<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，能对竖图起作用，对横图不起作用。
結論は、_widthあると_heightが上書かれているので、95パーセント完璧を行います。また、あなたの参照のための詳細な分析を行って猫の兄弟のCSS表現のパフォーマンスを最適化するために行います。IE6プラス_width場合：式（関数（EL）{el.style.width = el.offsetWidth> 200 '200pxの'：el.offsetWidth + 'ピクセル';カウンタ（ '2'）;?}（この）） ;句。
ます。https：//www.cnblogs.com/JoannaQ/archive/2012/10/15/2723709.htmlで再現