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;//图片对齐文字的顶部
    }

  • 相关阅读:
    浏览器缓存机制
    linux mail命令用法
    linux下Memcached安装以及PHP的调用
    JAVA和C# 3DES加密解密
    C++中函数调用时的三种参数传递方式详解

    const的用法,特别是用在函数前面与后面的区别!
    海底捞的“七宗罪”
    解决Qt5.7.0 cannot find -lGL
    怎么删除桌面右键"打开好桌道壁纸"
  • 原文地址:https://www.cnblogs.com/linsx/p/2818486.html
Copyright © 2011-2022 走看看