精华内容
下载资源
问答
  • css图片等比例缩放

    千次阅读 2012-05-29 11:18:21
    css样式代码 img {max-width:500px; max-height:500px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 500 ? "500px" : "auto"):(this.style....
    css样式代码
    
    <style type="text/css">
    img {max-width:500px; max-height:500px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 500 ? "500px" : "auto"):(this.style.height = this.offsetHeight >= 500 ? "500px" : "auto")); display:inline !important;}
    </style>
    示例中是默认网页所有的img的标签中的图片都会缩放,如果想让特定的图片缩放只要修改下前面的css名字,然后在网页中调用就可以了
    展开全文
  • CSS实战笔记(十二) 图片等比例缩放

    千次阅读 2020-06-29 23:35:38
    在网页展示图片是一个很常见的需求,大多数情况下,展示区域的大小是固定的,原图片的大小也是固定的

    1、背景

    在网页展示图片是一个很常见的需求,大多数情况下,展示区域的大小是固定的,原图片的大小也是固定的

    如果展示区域的宽高和原图片的宽高不等比例,那么在默认情况下很可能会压缩或拉伸图片以适应区域大小

    下面我们用两张图片做一个对比实验,假设展示区域的宽高都是 300px

    横向图片的宽高分别是 722px 和 88px,纵向图片的宽高分别是 80px 和 525px

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .image {
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <img class="image" src="test.png">
    </body>
    </html>
    

    在这里插入图片描述

    在这里插入图片描述

    2、设置 CSS

    很显然,这并不是我们想要的,因为它会导致图片变形压缩,我们需要找到一种办法,能让图片等比例缩放

    最简单的方法莫过于设置 CSS,使得图片可以自动适应展示区域的大小,代码非常简单

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .image-box {
                width: 300px;
                height: 300px;
            }
            .image {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="image-box">
            <img class="image" src="test.png">
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    在这里插入图片描述

    3、使用 canvas

    设置 CSS 样式之后,图片会按照最小边进行等比例缩放,这种解决办法已经可以满足大多数的使用场景

    但有时候我们会希望展示区域被占满,鱼和熊掌不可兼得,这时我们不得不裁剪图片能够等比例缩放的最大区域

    实际上就是用一个与展示区域等比例的矩形截取图片,并要求截取出来的图片尽可能大且位于原图片的中心位置

    在这里插入图片描述

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <head>
        <script>
            window.onload = function() {
                let cvs = document.querySelector('#image')
                let ctx = cvs.getContext('2d')
                let img = new Image()
                img.src = 'test.png'
                img.onload = () => {
                    let adaptedImage = adaptImage(0, 0, img.width, img.height, 0, 0, cvs.width, cvs.height)
                    ctx.drawImage(img, ...adaptedImage)
                }
            }
            function adaptImage(imgX, imgY, imgW, imgH, cvsX, cvsY, cvsW, cvsH) {
                let idealW = imgW
                let idealH = cvsH + (imgW - cvsW) * (cvsH / cvsW)
                if (idealH <= imgH) {
                    return [0, imgH / 2 - idealH / 2, idealW, idealH, cvsX, cvsY, cvsW, cvsH]
                } else {
                    idealH = imgH
                    idealW = cvsW + (imgH - cvsH) * (cvsW / cvsH)
                    return [imgW / 2 - idealW / 2, 0, idealW, idealH, cvsX, cvsY, cvsW, cvsH]
                }
            }
        </script>
    </head>
    <body>
        <canvas id="image" width="300" height="300">
    </body>
    </html>
    

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • css图片等比例自动缩放

    千次阅读 2020-04-17 17:07:35
    根据父容器的自动缩放,并保持图片原来的比例。需要这样设置父容器的大小。 img{ max-width: 100%; max-height: 100%; width: auto; height: auto; } ...

    根据父容器的自动缩放,并保持图片原来的比例。需要这样设置父容器的大小。

     
    img{  
        max-width: 100%;  
        max-height: 100%;     
        width: auto;  
        height: auto;  
        
    } 

     

    展开全文
  • CSS实现图片按固定大小等比例缩放,保证大图片按照 比例缩放到合适。
  • 如何使用CSS实现图片等比例缩放

    千次阅读 2020-09-10 16:47:12
    首先,这里采用CSS3的方式,先设置父div的宽高,在对其中的img标签设置缩放比例。 下面是Div代码 <div class = "FuD"> <img src = "图片路径" class = "img"/> </div> 下面是CSS代码 .FuD{ width...

    首先,这里采用CSS3的方式,先设置父div的宽高,在对其中的img标签设置缩放比例。
    下面是Div代码

    <div class = "FuD">
    <img src = "图片路径" class = "img"/>
    </div>
    

    下面是CSS代码

    .FuD{
    width:500px;
    height:550px
    .img{
         transform: scale(0.5);  //缩小0.5
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -o-transform: scale(0.5);
        -moz-transform: scale(0.5);
    }
    }
    

    下面我们看看效果图
    缩放前在这里插入图片描述
    缩放后效果
    缩放后

    是不是很简单呢!
    有问题的话,欢迎大家评论留言喔!

    展开全文
  • css提供了一个属性,可以达到图片不被变形的效果,给图片加上 object-fit: cover; 这个属性还有别的值 object-fit: fill; object-fit: contain; object-fit: scale-down; 可以自己去试一下,看看效果. ...
  • css img等比例缩放并且图片水平垂直居中展示 父元素 div{ width: 400px; height: 400px; position: relative;/* 使用定位实现水平垂直居中 */ } 按父容器宽度自动缩放,并且保持图片原本的长宽比 img{ ...
  • img src="图片地址" alt=""> </div> /* img 外侧盒子 */ .guild_img_box{ position: relative; width: 80px; height: 80px; border-radius: 50%; margin: 0 auto; display: block; ...
  • 然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片。我当时想着,抛开技术实现层面,图片展示也理应是这样的,更加友好。当时我就说应该没啥大问题,于是就有了下文...
  • css 图片比例缩放

    2020-04-27 10:20:51
    } expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,【这里的CSS属性可以是元素固有的属性,也可以是自定义属性。】是动态设置CSS属性的强大方法,但也存在着一定的危险性。 CSS属性...
  • CSS3的background-size属性,实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
  • css-图片(img)的等比例自动缩放

    万次阅读 2019-05-05 18:39:26
    img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 根据父容器的自动缩放,并保持图片原来的比例。这样你设置父容器的大小就可以啦。 ...
  • 在网页美化过程中会碰到控制div中的img为指定大小,为了不让图片变形或失真,所以只能采用等比例,本人搜集整理了一些实用技巧,需要了解的朋友可以参考下
  • css img 等比例自动缩放

    万次阅读 2018-04-26 09:34:01
    缩放图片,imgSrc用户延迟加载图片url 52 function AutoResizeImage(maxWidth,maxHeight,objImg,imgSrc){ 53 var img = new Image(); 54 img.src = imgSrc || objImg.src; 55 var ...
  • 在手边的项目遇到了一点问题,需要从后台拿取图片外链再展示在前台的详情页里。但是外层容器的大小是固定的。而从外联的图片传回来的确实大小不一横竖不定的图片。 参考了网上现成的解决方案做了修改后算是解决了这...
  • css 图片随屏幕等比例缩放

    千次阅读 2020-04-13 15:22:50
    有时我们希望图片能随屏幕大小的缩放缩放,两种情况: 单个图片缩放 图片在盒子内缩放图片缩放 <style type="text/css"> img { width: auto; height: auto; max-width: 100%; m...
  • css图片比例缩放不变形

    万次阅读 2018-06-19 11:06:47
    },这样设置图片可以使图片在指定的空间内缩放。举例:&lt;div style="width:90px;height:60px"&gt; &lt;img src="a.jpg"&gt; &lt;!--这里我们假如图片的实际尺寸...
  • 一 \o "CSS实现图片等比例缩放成功(演示" CSS实现图片等比例缩放成功(演示) 可能会遇到这样的情况当用户上传一张很大的图片的时候这样网页的布局有可能会打乱如果用JavaScript来处理这样的问题可能会影响网页的运行...
  • 高度),这个时候如果图片相对于这个位置不是比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例比例缩小不变形...
  • 在工作中经常需要对图片进行缩放,但有些缩放会让图片变形,所以今天就给大家介绍CSS如何实现图片等比例缩放不变形,正在学习CSS的小伙伴赶紧过来看看吧! 更多相关视频: 0基础前端利用『HTML+CSS』制作你喜欢...
  • img{ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ ...
  • CSS图片等比例缩放

    2011-10-31 08:54:40
    CSS下用代码控制IMG图片的宽高,自动缩放。 &lt;style&gt; img{ border:1px solid #cacaca; padding:2px; max-width:300px; width:expression(this.offsetWidth &gt; 300 ? &...
  • 主要介绍了CSS实现图片等比例缩小不变形,通过实例代码给大家介绍了css控制图片大小不变形的相关知识,需要的朋友参考下吧
  • img{ width:auto;height:auto;max-height:100%;max-width:100%; }
  • CSS图片添加阴影,并且等比例缩放图片
  • CSS图片比例缩放

    2021-09-24 09:44:45
    文章目录前言一、图片比例缩放方案1.padding(推荐)2.设置height二、图片的路径总结 前言 一张banner图,在不同的屏幕上铺满 宽度与屏幕宽度相同,高度根据宽度进行自适应,即图片的定比例缩放 图片的宽高可以撑...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,951
精华内容 7,580
关键字:

css图片等比例缩放