精华内容
下载资源
问答
  • 很多时候我们给网站了一个大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

    展开全文
  • 图片等比例缩放,jQuery和js的两种图片等比例缩放效果,简单实用。
  • 本篇文章主要的介绍了关于html img标签图片的等比例缩放的介绍和使用实例,最后还有关于html img标签图片等比例缩放的总结,接下来让我们一起来看这篇文章吧 首先我们先看看html img图片如何等比例缩放: 在DIV CSS...

    本篇文章主要的介绍了关于html img标签图片的等比例缩放的介绍和使用实例,最后还有关于html img标签图片等比例缩放的总结,接下来让我们一起来看这篇文章吧

    首先我们先看看html img图片如何等比例缩放:

    在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决。

    html img标签图片缩放的解决方法有两种:

    一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。

    比如淘宝,要求店铺主上传产品封面图片是正方形的,为什么,因为图片宝贝展示列表都是正方形的排版布局,这样要求上传合适正方形宝贝封面图片,也是让图片不变形。

    所以有条件的情况下,大家将首页、图片列表页的布局宽度高度保持一致,上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。

    二、使用CSS max-width和max-height实现图片自动等比例缩小

    很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。

    以下DIVCSS5通过实例对比方法让大家掌握CSS控制图片缩小不变形技巧。

    接下来看关于html img图片缩放的案例:

    这里有个DIV盒子(DIV class命名为"tupian")CSS宽度和CSS高度方便为300px和100px同时设置1px黑色边框,里面放了一张图片(图片原始宽度650px为高度为406px)。并通过CSS固定死图片宽度高度。

    关于html img标签图片缩放的全部代码:

    > <!DOCTYPE html>
    > 
    > <html>
    > 
    > <head>
    > 
    > <meta charset="utf-8" />
    > 
    > <title>图片缩小不变形实例 www.php.cn</title>
    > 
    > <style>
    > 
    > .tupian{ border:1px solid #000; width:300px; height:100px}
    > 
    > .tupian img{width:300px; height:100px}
    > 
    > </style>
    > 
    > </head>
    > 
    > <body>
    > 
    > <div class="tupian">
    > 
    > <img src="img.jpg" />
    > 
    > </div>
    > 
    > </body>
    > 
    > </html>
    
    

    代码因为没放图片就不显示效果了,可以自行脑补去。

    通过CSS固定对象内图片高度宽度,这样图片如果不是等比例缩小,那么图片就变形了。

    前面说的都差不多,现在来开始总结:

    CSS DIV图片缩小不变形总结:最好解决方法就是从设计图片本身出发,将图片设计成与布局中宽度高度成等比例图片,比如你布局时候图片宽度为300px,高度为200px,那你设计图片素材时候提交添加的图片宽度高度本身可以为600px宽,400px高,或900px宽600px高,这样等比例的图片才能保证真正图片缩小后不变形,显示完整。

    以上就是html图片怎么等比例缩放?html img图片缩放方法总结(附实例)的详细内容,更多请关注我!!!

    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(网页制作,网站开发,web开发,从0基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系统路线图】全栈工程师学习路线以及规划都有整理,分享给小伙伴)点:学习前端,我们是认真的

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

    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

    展开全文
  • pc端网页等比例缩放

    千次阅读 2019-08-02 23:49:44
    <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="white"> 也设置百分比body
     <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="white">
    
    

    也可以设置百分比body

    展开全文
  • 图片等比例缩放个人最优化版(IE6,IE7,FF) 在网站中,用户上传的图片有大有小,设置 width height ,则会导致图片变形,如果不设置,网页又会变形,这个代码可以完美的解决这个问题。
  • 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图,本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。先看demo,打开后,调整浏览器窗口大小,观察...
  • 2018年8月4日由于移动互联网蓬勃发展、若WordPress主题开发人员,在设计的WordPress主题网页时,没做好HTML 5图片自适应屏幕……在移动设备上浏览网站,就会...img标签等比例自动缩放大小。接下来,CSS image高度和...
  • 网站开发的过程中,经常要对一些图片进行一些处理,比如说缩放,裁剪,加水印等等。当然这些功能不仅仅可以用在开发网站的过程中,平时...今天分享一个图像等比例缩放的函数。需要中的同学可以稍作修改,然后自己拿
  • vb.net写的一个图片按等比例缩放,剪辑图像的函数。我们在作网站的时候,经常遇到用户上传一些图片大小不对的,或上传很大的图片,这个类就是将客户的图片进行剪辑处理一下,然后再给存起来。 ''' <summary&...
  • Tips:本文主要介绍CSS3的background-size属性,实现响应式式图片等比例缩放。 (一)基本语法 基本语法:background-size: length | percentage | cover | contain; (可参照w3c的为准) length 该属性值是...
  • 微信小程序通过background-image设置背景: 只支持线上图片和base64图片,不支持本地图片;...在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本: background-im...
  • 在工作中经常需要对图片进行缩放,但有些缩放会让图片变形,所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形,**正在学习CSS的小伙伴赶紧过来看看吧! 下面一段代码给大家介绍CSS实现图片比例缩小不变形 ...
  • js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功能,...
  • 使用rem等比例缩放手机界面

    千次阅读 2016-08-02 23:06:38
    这几天写公司官网的手机端界面,同事介绍了一种布局模式,即使用rem等比列缩放布局。 rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了。 (function (doc, win) { var docEl = doc.documentElement,...
  • 对于等比例缩放代码设置说明!

    千次阅读 2017-11-28 11:24:08
    一、 1.name="viewport" //设置视口(网页可绘制的区域) 2.width=device-width //应用程序的宽度和屏幕的宽度是一样的 ...4.initial-scale=1.0 //应用程序启动时候的缩放尺度(1.0表示不缩放) 5.mini
  • 昨天自己的一个网站需要实现图片等比例缩放,但又不能使用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...
  • 如果图片本身没有设置 width、height属性的话,只需要修改  max-width:100%; 就可以了   如果图片本身设置了 width、height属性的话,需要同时修改width 和height 两种属性, ...我的解决办法如下 ...
  • 所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果,或者通过缩放浏览器的宽度来查看效果,我们可以看到不管在任何分辨率下,页面的排版都是按照等比例进行切换,并且布局没有乱。...
  • 本文实例讲述了jQuery实现按比例缩放图片的方法。分享给大家供大家参考,具体如下: 做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而...
  • 2.子元素加绝对定位,并设置页面缩放比例 3.调整子元素大小,移动子元素位置,使之与父元素贴合 .box { position: relative; overflow: hidden; width: 600px; height: 420px; margin: 0 auto; border: 1...
  • 很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法。 帅气简单的CSS3方法 html { background: url...
  • 摘要: 前端写页面布局时,图片变形是个很令人头疼的问题,手机屏幕分辨率不一样,出来的效果就不一样,下面的代码可以解决这些问题,保持图片在不同分辨率下面也可以让图片不变形 首先不能给外层列表定高度,用margin...
  • 很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法。1.帅气简单的CSS3方法html { background: url(images/...
  • // 375尺寸的比例,换算成@1x设计稿后1px=0.01rem __rootrem = Math.floor(clientWidth * 100 / 750); (document.documentElement || document.body.parentNode).style.fontSize = __rootrem + "px"; } setFont...
  • 为了使图片不是真,需要进行图片的等比例缩放。 之前在网站上发现所有浏览器都没问题,唯独ie8出现这个问题,因为之前的系统win8无法安装ie8,没有测试环境以至于这个问题存在了很长时间。今天在另一个哥们的电脑...
  • 网站的图片,常常需要按照容器的大小进行等比例缩放(保证图片不失真), 并同时让图片居中显示(左右居中,上下居中)。 实现的代码如下: 注意: 需要自己下载一个 jquery的js。 比如我有一个文件放在 【./...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,380
精华内容 8,152
关键字:

网站等比例缩放