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

  • 相关阅读:
    vs2008打包过程图解
    [转载]jQuery UI 使用
    [转载]jquery的extend和fn.extend
    [转载]jQuery.extend 函数详解
    jQuery 数据 DOM 元素 核心 属性
    jQuery 遍历
    [转载]JQuery.closest(),parent(),parents()寻找父节点
    (function($){...})(jQuery)是什么意思
    [转载]css hack
    jQuery ajax
  • 原文地址:https://www.cnblogs.com/linsx/p/2818486.html
Copyright © 2011-2022 走看看