CSS样式中图片属性设置(缩放与对齐方式)

小七 发表于:2017-05-03 15:52 复制链接

您的等级不够,“初级及以上会员” 开启

?提问题 +写文章
阅读数:8207
上一节介绍了边框,这一节介绍图片在css中的缩放与对齐,其实跟文字的差不多的原理,为了更加清晰的看到对齐的效果,我们把演示图片采用一个正方形的Logo,就是我们七街红色的方块部分,放在表格(关于CSS中的表格用法后面会单独讲解)中进行示范,表格都加上边框,以便对照,完整的演示代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img.testone{
            width:100px;
                        height:100px;
                        }
</style>
</head>

<body>
<table width="600" height="363" border="1">

  <tr>
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
  </tr>
  <tr>
    <td width="150" height="150"><img src="bbs-logo.gif" class="testone"/></td>
    <td width="150" style="text-align:center;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:left;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:right;"><img src="bbs-logo.gif" width="46" height="46" /></td>
  </tr>
  <tr>
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
    <td width="150" style="text-align:center; vertical-align:middle;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:left; vertical-align:bottom;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:right; vertical-align:top;"><img src="bbs-logo.gif" width="46" height="46" /></td>
  </tr>

</table>
</body>
</html>



head里面的css部分定义了一个图片的类testone让图片的高度和宽度均缩放到100px。
表格的第一行作为对照行,使用logo原始的宽度和高度,不做修饰;

第二行第一列,img标签引入css,即可看到效果;
第二行第二列,text-align:center;这个是让图片水平方向居中显示;
第二行第三列,text-align:left;这个是让图片水平方向靠左显示,其实默认的就是靠左的;
第二行第四列,text-align:right;让图片水平方向靠右显示;

第三行第一列,同样作为对照行,不加css修饰;
第三行第二列,与上面对照行的区别是,垂直方向也居中了;
第三行第三列,与上面对照行的区别是,垂直方向靠左;
第三行第四列,与上面对招行的区别是,垂直方向靠右;


返回列表 使用道具 举报
16 条评论
您需要登录后才可以回帖 登录 | 注册
高级
烨水朱华 烨水朱华 发表于 2017-05-03 16:53 | 阅读全部
vertical-align  这个确实有用
使用道具 举报
回复
pertepan pertepan 发表于 2017-05-03 23:26 | 阅读全部
楼主说得很好,学习了
使用道具 举报
回复
ice2andy ice2andy 发表于 2017-05-04 09:05 | 阅读全部

vertical-align  是比较值得注意的属性。
使用道具 举报
回复
shxieli shxieli 发表于 2017-05-04 09:16 | 阅读全部

楼主说得很好,学习了
使用道具 举报
回复
小七 小七 发表于 2017-05-04 09:58 | 阅读全部
ice2andy 发表于 2017-5-4 09:05
vertical-align  是比较值得注意的属性。

正文里面的配图通常是居中比较合理,好看
使用道具 举报
回复
写的不错,真心不错,顶一个
使用道具 举报
回复
beijita455 beijita455 发表于 2017-05-04 10:03 | 阅读全部
学习了学习了学习了
使用道具 举报
回复
外汇高手 外汇高手 发表于 2017-05-04 11:43 | 阅读全部
学习了,
使用道具 举报
回复
xingcuide2 xingcuide2 发表于 2017-05-04 13:46 | 阅读全部
使用道具 举报
回复
这教程写的不错,顶一下
使用道具 举报
回复
肖大胖学seo 肖大胖学seo 发表于 2017-05-06 08:43 | 阅读全部

写的不错,真心不错,顶一个
使用道具 举报
回复
12下一页
相关推荐

您的等级不够,“高级会员” 开启