相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

一: 效果:

1) 黑色 部分是 相框.

2) 图片 要实现 水平居中, 垂直居中

3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ;

如果 高度 大于 宽度 , 那么 高度 100% , 宽度自适应 ,同时不能超过 黑色 相框的 宽度;

二:代码

所以 , 写两个样式, 对应 宽度 大于 高度;  高度 大于宽度;  然后判断图片的 宽度 和 高度;

----------------------------

css:

 /* *********课程 05***************** */
 .kecheng_05 {
     margin: 40px;
     margin-top: 0px;
     border: 1px solid red;
 }

 .kecheng_05_image {
     width: 100%;

 }

 .kecheng_05_image_cell {
     width: 180px;
     /*width: 195px;*/
     /*width: 33%;*/
     height: 240px;
     line-height: 240px;
     float: left;
     border: 1px solid black;
     margin-left: 8px;
     text-align: center;

     margin-left: 10px;

     position: relative;

 }

 /**宽度 > 高度 的 图片**/
 .wImage {
     width: 100%;
     max-height: 100%;
     vertical-align:middle;

 }

 /***高度 > 宽度 的 图片 *******/

 .hImage {
     height: 100%;
     max-width: 100%;
     vertical-align:middle;
 }

 /****右下角的图片*****/

 .rbImage {
     position: absolute;
     bottom: 0px;
     right: 0px;
 }

 /*IE6, IE7 生效*/
 .floatfix{
     *zoom:;
 }

 /*其他浏览器*/
 .floatfix:after{
     content:"";
     display:table;
     clear:both;
 }

1) wImage ,   hImage 对应  宽度 大于 高度,  高度 大于宽度

2) 如果图片要水平居中.   只要在 图片的 父级设置 text-align:center 就可以了.

如果图片要垂直居中;

　　第一: 图片的父级 ,设置  line-height = 父级的高度  , 第 21, 22 ,26行

　　第二: 图片本身设置: vertical-align:middle;       第42, 52行.

3) 注意 wImage中设置了 max-height;     hImage 中 设置了 max-width.

php 返回的 html代码:

 <!-- <div class="kecheng ns"> -->

     <div class="kecheng_title">
         <div onclick="kechengJump('ns/ns01.php', this)" class="button ">课程介绍</div>
         <div onclick="kechengJump('ns/ns03.php', this)" class="button">教师简介</div>
         <div onclick="kechengJump('ns/ns02.php', this)" class="button ">泥塑映像</div>
         <div onclick="kechengJump('ns/ns04.php', this)" class="button">进阶奖励</div>
         <div onclick="getCourseAlbum(this)" class="button selectButton">课程相册</div>
     </div>

     <div class="kecheng_05">
         <div class="kecheng_05_image floatfix">
             <?php

                 list($width, $height) = getimagesize(PROJECT . 'Application/View/Home/Course/piying/img/tp/10.png');

                 if ($width > $height) {
                     $imgClass = 'wImage';
                 } else {
                     $imgClass = 'hImage';
                 }

              ?>
             <div class="kecheng_05_image_cell">
                 <img class="<?php echo $imgClass ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/piying/img/tp/10.png';  ?>">
                 <img class="rbImage" src="<?php echo PROJECT . 'Application/View/Home/Course/images/right-bottom.png';  ?>" alt="">
             </div>

             <?php

                 list($width, $height) = getimagesize(PROJECT . 'Application/View/Home/Course/piying/img/tp/13.png');

                 if ($width > $height) {
                     $imgClass = 'wImage';
                 } else {
                     $imgClass = 'hImage';
                 }

              ?>

             <div class="kecheng_05_image_cell">
                 <img class="<?php echo $imgClass ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/piying/img/tp/13.png';  ?>">
                 <img class="rbImage" src="<?php echo PROJECT . 'Application/View/Home/Course/images/right-bottom.png';  ?>" alt="">
             </div>

         </div>

     </div>

 <!-- </div> -->

上面只是一个简单的实例 : 并没有从数据库中取出数据 .随机列举的数据.

注意:

list($width, $height) = getimagesize(PROJECT . 'Application/View/Home/Course/piying/img/tp/10.png');

---> getimagesize() 是一个函数 ,返回图片的信息 , 是一个数组, 其中 索引 0 是 宽度, 索引 1 是 高度 .

可以用 绝对地址,相对地址, 也可以用url地址

参考链接:
php getimagesize 函数 - 获取图像信息

---> list() 是一个语法结构, 是将 数组中的值 ,赋给 list 中的参数.