一: 效果:
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实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
-
[css]实现垂直居中水平居中的几种方式
转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...
-
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...
-
[转] 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用marg ...
-
CSS3实现 垂直居中 水平居中 的技巧
1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...
-
input 设置 width:100% 和padding后宽度超出父节点
input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...
-
Aspose.Words操作Word.PDF,让图片和文本垂直居中,水平居中解决方案
x 环境 { "Aspose.Words": {"Version":"18.x"} } 需求与难题 生成试卷的时候,如果数学题目中有特殊符号 ...
-
设置UILabel可变高度(根据文本内容自动适应高度)
@property(nonatomic)UILabel *showLabel; // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...
-
关于div容器在ie6下默认高度不为0(存在默认高度)
最近做项目的时候遇到一个问题,相信很多人都遇到过,就是在测试兼容性的时候,在ie6下小于12px 的背景的高度不等于原高,或许这样说你可能不是很明白,那就举个例子吧! 如图所示: 锯齿状的背景图本来是 ...
随机推荐
-
Python通用序列操作
1.序列概览 1.数据结构 序列.容器 Python中最基本的数据结构是序列,其有索引(从左到右第一个索引为0,从右到左第一个索引为-1). Python包含6中内建的序列: 列表 元组 字符串 Un ...
-
Python自动化测试工具Splinter简介和使用实例
Splinter 快速介绍 官方网站:http://splinter.cobrateam.info/ 官方介绍: Splinter is an open source tool for testing ...
-
Ubuntu回收站
以前删除文件经常Move to trash,今天想清空发现根本不知道回收站在哪里,囧.遂Google之,于是发现在 -/.local/share/Trash目录下. 打开目录看看有什么东西: ➜ ~ ...
-
Android 源码编译及常见错误及解决方法
最近要往arm开发板上移植android系统,大大小小的问题遇到了太多太多,都是泪啊.本人初接触嵌入式开发,对问题的根源不是太了解,不过好在每解决一个问题,便记录一下.话不多说,正式罗列问题: hos ...
-
jvisualvm图解
http://blog.csdn.net/a19881029/article/details/8432368 jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析. ...
-
CCIE路由实验(2) -- BGP选路原则
BGP路径属性分为4类: 公认必遵(Well-Known Mandatory):BGP更新报文中必须包含的,且必须被所有BGP厂商实现所能识别的,包括ORIGIN,AS-PATH和Next_Hop 1 ...
-
CentOS-7.2安装SQuirreL SQL Client连接Hive
一,SQuirreL SQL Client干吗的? SQuirreL SQL Client是一款功能强大的服务器配置管理软件,该软件能够帮助用户快速.高效的配置服务器,且支持用户查看数剧库的结构并发出 ...
-
[转载] su和sudo
转载自http://www.cnblogs.com/haichuan3000/articles/2123633.html Mandriva 说也奇怪,用root登录的用户比一般用户还难用,当初用FC6 ...
-
连接WiFi工具类
public class WifiConnect { WifiManager wifiManager; // 构造函数 public WifiConnect(WifiManager wifiManag ...
-
MyBatis 中使用数据库查询别名进行映射
方法1 XXMapper.xml <mapper namespace="com.hfepc.dao.andon.AndonExceptionKanbanVOMapper" & ...