精华内容
下载资源
问答
  • 很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤。这用css竟然也是可以...

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤。这用css竟然也是可以实现的,瞬间感觉自己的css弱爆了,下面是我写的小demo,我想在响应式的网站上,这个用途还是很广的

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        .wrap {
          position: relative;
        }
        .banner {
          width:100%;
          height:auto; 
          background-image: url(banner.jpg);
          background-size: 100% auto;
          background-repeat: no-repeat;
          position: relative;
        }
        .banner::after {
          content: "";
          display: block;
          /*图片的宽高比计算得出*/
          padding-top: 45%;
        }
         .box {
          background-color: green;
          /*居中盒子*/
          position: absolute;
          top:100px;
          left:0;
          right: 0;
          margin:0 auto;
          width:50%;
          height:100px;
        } 
         .main {
          width:100%;
          height:100px;
          background-color: yellow;
        } 
      </style>
    </head>
    <body>
    <div class="wrap">
      <div class="banner">
        <div class="box"></div>
      </div>
      <div class="main"></div>
    </div>
    </body>
    </html>

    效果图:

    绿色盒子始终占据整个背景图的50%,且居中,下面的盒子始终紧跟着背景图高度变化。无论屏幕如何缩放,都能保证全体等比缩放

    转载于:https://www.cnblogs.com/yesyes/p/6738193.html

    展开全文
  • 对于图片有固定宽高要求的网站来说,直接的缩略图并不能解决问题,因为等比例缩放的宽度或者高度是不固定的,但是网站还是要求图片的宽高是固定的,那怎么办呢,只有一个办法,首先把图片等比例缩,缩放比根据宽度和...

    对于图片有固定宽高要求的网站来说,直接的缩略图并不能解决问题,因为等比例缩放的宽度或者高度是不固定的,但是网站还是要求图片的宽高是固定的,那怎么办呢,只有一个办法,首先把图片等比例缩,缩放比根据宽度和高度哪个值大来决定,然后再从缩略图中裁切中间的图片,而这裁切出来的图片就是网站需要的固定图片,下面是代码

    需要php开启GD2

     

    <?php
    echo thumb_dblxr('./2.png','144','94','test1.png');
    // 等比例缩放
    function thumb_dblxr($backimg,$width,$height,$newsfile){
    list($s_w,$s_h,$exten) = getimagesize($backimg);
    //等比例固定算法
    //$test = $s_w / 144 > $s_h / 94 ? 144 : 94;
    //echo $test;die;
    if($width && ($s_w / $width) > ($s_h / $height )){
    $width = ($height/$s_h)*$s_w;
    }else{
    $height = ($width/$s_w)*$s_h;
    }
    echo $width."<br />";
    echo $height;die;
    $new = imagecreatetruecolor($width, $height);//创建一个真色彩
    //根据得到的扩展名不同不用的GD库函数处理
    if($exten==1){
    $old = imagecreatefromgif($backimg);
    }elseif ($exten==2){
    $old = imagecreatefromjpeg($backimg);
    }elseif ($exten==3){
    $old = imagecreatefrompng($backimg);
    }
    //遇到gif背景透明色的处理
    $otcs = imagecolortransparent($old);
    if ($otcs>=0 && $otcs < imagecolorstotal($old)){
    $tran = imagecolorsforindex($old, $otcs);
    print_r($tran);
    $newtran = imagecolorallocate($new, $tran["red"], $tran["green"], $tran["blue"]);
    imagefill($new, 0, 0, $newtran);
    imagecolortransparent($new,$newtran);
    }

    imagecopyresampled($new, $old, 0,0,0,0,$width,$height,$s_w,$s_h);
    //根据得到的扩展名不同不用的GD库函数处理
    if($exten==1){
    imagegif($new,$newsfile);
    }elseif ($exten == 2){
    imagejpeg($new,$newsfile);
    }elseif ($exten ==3){
    imagepng($new,$newsfile);
    }
    imagedestroy($new);
    imagedestroy($old);
    }

    //图片裁剪
    // $backimg = './test1.png';
    list($w,$h,$exten) = getimagesize($backimg);
    $x = ($w - 144) / 2;
    $y = ($h - 99) / 2 ;
    echo cut_thumb('./test1.png',$x,$y,'144','94','tt.png');
    function cut_thumb($backimg,$cut_x,$cut_y,$cut_width,$cut_height,$newfile){
    list($c_w,$c_h,$c_exten)= getimagesize($backimg);
    if($c_exten==1){
    $back = imagecreatefromgif($backimg);
    }elseif ($c_exten==2){
    $back = imagecreatefromjpeg($backimg);
    }elseif($c_exten==3){
    $back = imagecreatefrompng($backimg);
    }
    $c_new = imagecreatetruecolor($cut_width, $cut_height);
    imagecopyresampled($c_new, $back, 0, 0, $cut_x, $cut_y, $cut_width, $cut_height, $cut_width, $cut_height);
    if($c_exten==1){
    imagegif($c_new,$newfile);
    }elseif ($c_exten==2){
    imagejpeg($c_new,$newfile);
    }elseif($c_exten==3){
    imagepng($c_new,$newfile);
    }
    imagedestroy($back);
    imagedestroy($c_new);

    }
    ?>

     

     

    文章均属 松林's blog 原创 转载请注明转自松林's blog

    本文地址 : http://www.songlin51.com/archives/820.html

    转载于:https://www.cnblogs.com/yiwd/archive/2013/06/08/3126679.html

    展开全文
  • 等比例缩放图片代码

    2010-09-27 18:01:00
    像发布产品,添加新闻等模块...刚刚在同事那里取得一个比较好的解决方案,就是在图片上传的时候只保存一张实际尺寸的图,在前台页面取的时候,如果需要实现缩略图,就把上传的实际尺寸图片等比例缩放一下,就可以...

    像发布产品,添加新闻等模块实现图片上传的功能是非常普遍的,但是往往会涉及到缩略图和实际图片两种,如果在上传图片的时候就生成缩略图就会产生上传一张图片出现缩略图和实际尺寸图两张图片的情况,占用空间不说,还是比较费事的。济南网站建设

    刚刚在同事那里取得一个比较好的解决方案,就是在图片上传的时候只保存一张实际尺寸的图,在前台页面取的时候,如果需要实现缩略图,就把上传的实际尺寸图片等比例缩放一下,就可以轻松的搞定,下面附上等比例缩放的代码。

    public string getpic(string url, int w, int h)
        {
            if (url == "")
            {
                return "无图片";
            }
            else
            {
                try
                {
                    System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(url));
                    int width = image.Width;
                    int height = image.Height;
                    if (width > w || height > h)
                    {
                        if ((double)width / (double)w > (double)height / (double)h)
                        {
                            height = Convert.ToInt32(height * ((double)w / (double)width));
                            width = w;
                        }
                        else
                        {
                            width = Convert.ToInt32(width * ((double)h / (double)height));
                            height = h;
                        }
                    }
                    return "<img src=\"" + url + "\" border=0 width=\"" + w + "\" height=\"" + h + "\" />";
                }
                catch
                {
                    return "无图片";
                }
            }
    

     

    OK,有了上面这个等比例缩放的方法,就可以把从数据库里取出的图片路径以及要缩放到的宽和高传进去就完事了。

     注:此方法会出现另外一种不理想的状况,如果我们上传两张图片,一张尺寸为:120*80,一张尺寸为60*120,那么通过等比例缩放出来的图片会出现高或者宽压缩的情况。所以在上传的时候,尽量提示上传者上传标准尺寸的图片,比如 150*150。

     

     

     

    转载于:https://www.cnblogs.com/jkyweb/archive/2010/09/27/1837029.html

    展开全文
  • $( function () { var w = $(".content-co").width(); // ...高度等比缩放 ...设置缩放后的宽度和高度 } }); });   转载于:https://www.cnblogs.com/qigege/p/4978003.html
    <script type="text/javascript">
        $(function () {
            var w = $(".content-co").width(); //容器宽度 
            $(".content-co img").each(function () {//如果有很多图片,我们可以使用each()遍历 
                var img_w = $(this).width(); //图片宽度 
                var img_h = $(this).height(); //图片高度 
                if (img_w > w) {//如果图片宽度超出容器宽度--要撑破了 
                    var height = (w * img_h) / img_w; //高度等比缩放 
                    $(this).css({ "width": w, "height": height }); //设置缩放后的宽度和高度 
                }
            });
        }); 
    
    </script>

     

    转载于:https://www.cnblogs.com/qigege/p/4978003.html

    展开全文
  • 微信小程序通过background-image设置背景: 只支持线上图片和base64图片,不支持本地图片;...在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本: background-im...
  • 对于图片有固定宽高要求的网站来说,直接的缩略图并不能解决问题,因为等比例缩放的宽度或者高度是不固定的,但是网站还是要求图片的宽高是固定的,那怎么办呢,只有一个办法,首先把图片等比例缩,缩放比根据宽度和...
  • 网站开发的过程中,经常要对一些图片进行一些处理,比如说缩放,裁剪,加水印等等。当然这些功能不仅仅可以用在开发网站的过程中,平时...今天分享一个图像等比例缩放的函数。需要中的同学可以稍作修改,然后自己拿
  • 昨天自己的一个网站需要实现图片等比例缩放,但又不能使用js只能用css控制div中的img为指定大小,下面我找到一段代码分离给大家。  复制代码代码如下:<style type=”text/css”>.thumbImage img{ MAX-WIDTH: ...
  • 网站商户图片进行等比例缩放。 script: function resizeimg(ImgD,iwidth,iheight) {  var image=new Image();  image.src=ImgD.src;  if(image.width&gt;0 &amp;&amp; image.height&gt...
  • vb.net写的一个图片按等比例缩放,剪辑图像的函数。我们在作网站的时候,经常遇到用户上传一些图片大小不对的,或上传很大的图片,这个类就是将客户的图片进行剪辑处理一下,然后再给存起来。 ''' <summary&...
  • 网站的图片,常常需要按照容器的大小进行等比例缩放(保证图片不失真), 并同时让图片居中显示(左右居中,上下居中)。 实现的代码如下: 注意: 需要自己下载一个 jquery的js。 比如我有一个文件放在 【./...
  • 网站上可能会有很多图片,比如产品图片,而且他们可能大小不一,宽度和高度也不一定一样,有的很大有的很小。如果放在一张网页上,可能会破坏版面,但是如果强制让他们按照指定的宽度和高度显示,因为比例不同还会...
  • 如果你建立的网站涉及大量的图片处理,必然涉及到图片上传、缩放,而如何保持图片不失真,是很多初级PHP网站开发者比较头疼的一件事,今天未来往事就和大家分享一下如何进行等比例不失真图片缩放。**首先我们来了解...
  • 在编写网站的时候,给一个div设置背景图片,怎么让这个图片随着div大小的改变,而等比例缩放。? background: url(**); background-size: cover; background-position: ...
  • 如果想要图片按比例缩放, 最简单的就是把img宽度设为100%, 不设置高度,高度就会自动跟着高度缩放但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 , 然而图片尺寸不是这个比例,...
  • 网站上可能会有很多图片,比如产品图片,而且他们可能大小不一,宽度和高度也不一定一样,有的很大有的很小。如果放在一张网页上,可能会破坏版面,但是如果强制让他们按照指定的宽度和高度显示,因为比例不同还会...
  • 如果想要图片按比例缩放, 最简单的就是把img宽度设为100%, 不设置高度,高度就会自动跟着高度缩放但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 , 然而图片尺寸不是这个比例,...
  • 网站上可能会有很多图片,比如产品图片,而且他们可能大小不一,宽度和高度也不一定一样,有的很大有的很小。如果放在一张网页上,可能会破坏版面,但是如果强制让他们按照指定的宽度和高度显示,因为比例不同还会...
  • 一、前言  1. 本来想找个简单的功能练练手的,结果弄了个非常麻烦的-缩放图片,先把参考资料贴上来,...  2.找到了一个用javascript写的图片的等比例缩放h...
  • 响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时,如果想要图片按比例缩放,最简单的就是把img宽度设为100%,不设置高度,高度就会自动跟着高度缩放 但是如果要达到的效果是,要让图片的宽高要按...
  • 一、概述地图开发是android开发中比较常见的一个模块,以前做项目都直接使用了百度地图提供的...二、百度地图相关配置在百度开发者网站上下载相应的SDK导入,配置key值,添加相应权限。 三、展示地图1、我们的需求是后
  • 等比例压缩图片

    2014-04-11 16:30:00
    最近在开发图片网站,在网上找了很多图片等比例缩放,但是没有一个可以随意发挥!苦闷中。。。所以我特写了通用的 图片缩放 希望大家喜欢! 该段程序我就不注释了,我只把参数说一下: sourcePath:要缩放图片路径...
  • 在Web上显示图片,通常都会有图片显示比例问题,如果不给限制width和height,那么... 2、如果图片的大小超过了标准定义,那么等比例压缩图片。  3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
  • 但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止“撑破”布局,我们使用jQuery来等比例缩放图片。我们分两种情况来讲述: 1.已知图片尺寸 代码如下: <div id

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 128
精华内容 51
关键字:

网站等比例缩放