一: 效果:

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 中的参数.

巴特西

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

一: 效果:

二:代码

css:

php 返回的 html代码:

最新文章

热门文章

巴特西

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

一: 效果:

二:代码

css:

php 返回的 html代码:

最新文章

热门文章

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