zoukankan      html  css  js  c++  java
  • 页面图片的缩放问题

    之前遇到过几次关于页面里面图片的缩放问题,所以就以为自己熟悉了,就没记下来,刚同事又问到这个问题,我按照脑子里记的就给同事说了一遍,但是调试的时候,发现演示的效果不是对图片进行缩放,而是剪切。注意力一下子全被拉到这个问题上了。经过一番摸索,发现问题出现在图片的路径上。按照我讲的那种方法,图片在页面里面的代码应该写成<image src="themes/blue/images/photobg.gif "/>这种格式。但是我给同事讲的时候图片是<image class="photobg" />把图片放在class里面。所以我怎么调试都显示的是剪裁或者是原图,不会进行缩放。

    对于一个固定的容器,想让图片适应这个容器的大小,方法如下

    <div class="div1">
        <img src="图片存放的路径" />
    </div>
    
    .div1 img{
        87px;//图片的宽度
        height:100px;//图片的高度
      vertical-align:text-top;//图片对齐文字的顶部 }

    效果显示如下

    对图片进行缩小

    .div1 img{
        56px;//图片的宽度
        height:70px;//图片的高度
      vertical-align:text-top;//图片对齐文字的顶部
    }

    对图片进行放大

    .div1 img{
        156px;//图片的宽度
        height:177px;//图片的高度
      vertical-align:text-top;//图片对齐文字的顶部
    }

  • 相关阅读:
    打开外部程序
    检测是否渲染
    maxsxript 坐标转换 函数
    实用 SQL 语句
    【整理】一些有用的学习资源链接
    关于 static 和 final 的一些理解
    Java8新特性时间日期库
    推荐一套后台管理系统
    Java API 之 Object
    【软件体系结构】架构风格与基于网络应用软件的架构设计
  • 原文地址:https://www.cnblogs.com/linsx/p/2818486.html
Copyright © 2011-2022 走看看