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

时间:2022-08-31 21:30:44

一: 效果:

相册 垂直居中; 水平居中. 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 是 高度 .

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

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

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

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

参考链接:
php getimagesize 函数 - 获取图像信息 ---> list() 是一个语法结构, 是将 数组中的值 ,赋给 list 中的参数.

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


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



  

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

  1. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  2. &lbrack;css&rsqb;实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  3. 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

  4. &lbrack;转&rsqb; 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用marg ...

  5. CSS3实现 垂直居中 水平居中 的技巧

    1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...

  6. input 设置 width&colon;100&percnt; 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

  7. Aspose&period;Words操作Word&period;PDF&comma;让图片和文本垂直居中&comma;水平居中解决方案

    x 环境 { "Aspose.Words": {"Version":"18.x"} } 需求与难题 生成试卷的时候,如果数学题目中有特殊符号 ...

  8. 设置UILabel可变高度(根据文本内容自动适应高度)

    @property(nonatomic)UILabel *showLabel;   // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...

  9. 关于div容器在ie6下默认高度不为0(存在默认高度)

    最近做项目的时候遇到一个问题,相信很多人都遇到过,就是在测试兼容性的时候,在ie6下小于12px 的背景的高度不等于原高,或许这样说你可能不是很明白,那就举个例子吧! 如图所示: 锯齿状的背景图本来是 ...

随机推荐

  1. Python通用序列操作

    1.序列概览 1.数据结构 序列.容器 Python中最基本的数据结构是序列,其有索引(从左到右第一个索引为0,从右到左第一个索引为-1). Python包含6中内建的序列: 列表 元组 字符串 Un ...

  2. Python自动化测试工具Splinter简介和使用实例

    Splinter 快速介绍 官方网站:http://splinter.cobrateam.info/ 官方介绍: Splinter is an open source tool for testing ...

  3. Ubuntu回收站

    以前删除文件经常Move to trash,今天想清空发现根本不知道回收站在哪里,囧.遂Google之,于是发现在 -/.local/share/Trash目录下. 打开目录看看有什么东西: ➜ ~ ...

  4. Android 源码编译及常见错误及解决方法

    最近要往arm开发板上移植android系统,大大小小的问题遇到了太多太多,都是泪啊.本人初接触嵌入式开发,对问题的根源不是太了解,不过好在每解决一个问题,便记录一下.话不多说,正式罗列问题: hos ...

  5. jvisualvm图解

    http://blog.csdn.net/a19881029/article/details/8432368 jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析. ...

  6. CCIE路由实验&lpar;2&rpar; -- BGP选路原则

    BGP路径属性分为4类: 公认必遵(Well-Known Mandatory):BGP更新报文中必须包含的,且必须被所有BGP厂商实现所能识别的,包括ORIGIN,AS-PATH和Next_Hop 1 ...

  7. CentOS-7&period;2安装SQuirreL SQL Client连接Hive

    一,SQuirreL SQL Client干吗的? SQuirreL SQL Client是一款功能强大的服务器配置管理软件,该软件能够帮助用户快速.高效的配置服务器,且支持用户查看数剧库的结构并发出 ...

  8. &lbrack;转载&rsqb; su和sudo

    转载自http://www.cnblogs.com/haichuan3000/articles/2123633.html Mandriva 说也奇怪,用root登录的用户比一般用户还难用,当初用FC6 ...

  9. 连接WiFi工具类

    public class WifiConnect { WifiManager wifiManager; // 构造函数 public WifiConnect(WifiManager wifiManag ...

  10. MyBatis 中使用数据库查询别名进行映射

    方法1 XXMapper.xml <mapper namespace="com.hfepc.dao.andon.AndonExceptionKanbanVOMapper" & ...