精华内容
下载资源
问答
  • 主要介绍了CSS实现图片等比例缩小不变形,通过实例代码给大家介绍了css控制图片大小不变形的相关知识,需要的朋友参考下吧
  • 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图片等比例缩放

    千次阅读 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图片比例缩放

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


    前言

    一张banner图,在不同的屏幕上铺满
    宽度与屏幕宽度相同,高度根据宽度进行自适应,即图片的定比例缩放
    图片的宽高可以撑起盒子的宽高


    一、图片定比例缩放方案

    1.padding(推荐)

    我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值,设置内边距为高度的数值,最后用绝对定位把图片百分百填充到我们设置的区域里面。

    <div class="img_wrap">
      <img src="" />
    </div>
    
    .img_wap {
      padding-bottom: 56%;
      width: 100%;
      position: relative;
    }
    
    .img_wap img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    

    参考博客:https://blog.csdn.net/m_review/article/details/103348758`

    2.根据width设置height

    width的值100%,height的值通过width的值进行计算
    必须先算出width的高度,然后计算出height的绝对高度
    不能直接通过width百分比按照得到height百分比(width和height的1%高度是不一样的)

    注:会出现二次渲染?css中写入js代码会发生什么?


    二、图片的路径

    1、同一目录下路径,直接使用图片名称进行访问或使用./(代表同级目录)
    2、不同目录下路径,通过 . . /(代表上一级目录)
    3、/代表根目录
    参考博客:https://blog.csdn.net/qq_34769573/article/details/80445681

    设置height百分比无效

    当用百分比作为宽高时 因为百分比是相对于其最近的父元素的宽高
    (【注意一点:宽度一般会继承,而高度不会继承】)
    所以首先其父元素要有宽高,宽度一般不设置会有默认值
    (比如整个屏幕的宽度,【其实就是一层层继承下来的】),
    但是高度不设置就没有默认值,
    因此如果父元素没设高度值,而其内部元素用了百分比作为高度时,是没有效果的

    参考博客:https://blog.csdn.net/weixin_33819479/article/details/86276606

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

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

    2020-04-27 10:20:51
    } expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,【这里的CSS属性可以是元素固有的属性,也可以是自定义属性。】是动态设置CSS属性的强大方法,但也存在着一定的危险性。 CSS属性...
  • css-图片(img)的等比例自动缩放

    万次阅读 2019-05-05 18:39:26
    img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 根据父容器的自动缩放,并保持图片原来的比例。这样你设置父容器的大小就可以啦。 ...
  • 随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?那就利用css的强大功能吧。...
  • css img等比例缩放并且图片水平垂直居中展示 父元素 div{ width: 400px; height: 400px; position: relative;/* 使用定位实现水平垂直居中 */ } 按父容器宽度自动缩放,并且保持图片原本的长宽比 img{ ...
  • 图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让...
  • CSS3的background-size属性,实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
  • css如何实现图片在页面上以相同等比例显示缩放发布时间:2020-09-24 10:14:12来源:亿速云阅读:87作者:小新这篇文章...css图片等比例显示具体代码示例如下:css图片等比例显示代码示例.demo1-1 {float: left;widt...
  • 我们经常会需要把用户上传的图片比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考。按比例缩小或者放大到某个尺寸,对于标准浏览器(如Fire...
  • css提供了一个属性,可以达到图片不被变形的效果,给图片加上 object-fit: cover; 这个属性还有别的值 object-fit: fill; object-fit: contain; object-fit: scale-down; 可以自己去试一下,看看效果. ...
  • 在工作中经常需要对图片进行缩放,但有些缩放会让图片变形,所以今天就给大家介绍CSS如何实现图片等比例缩放不变形,正在学习CSS的小伙伴赶紧过来看看吧! 更多相关视频: 0基础前端利用『HTML+CSS』制作你喜欢...
  • css等比例缩放

    千次阅读 2021-04-30 01:45:09
    不用 js 代码实现图片比例缩放,就是不超出DIV设定的高宽显示比例图片解决这个问题的方法如下:先在html里添加一个img图片标签。运行页面后,这是完整显示图片大小的。图片大概是400x260左右的大校要进入图片缩放...
  • 然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片。我当时想着,抛开技术实现层面,图片展示也理应是这样的,更加友好。当时我就说应该没啥大问题,于是就有了下文...
  • 在DIV_CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个...CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决。 解决方法有两种: 第一种,让图
  • css实现图片按宽等比例缩放不变形

    千次阅读 2019-07-29 10:04:09
    <div id='evalPage '> <div class='imgbox'> <img class='image__inner' src='http://https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg' /> <.../...
  • 在网页美化过程中会碰到控制div中的img为指定大小,为了不让图片变形或失真,所以只能采用等比例,本人搜集整理了一些实用技巧,需要了解的朋友可以参考下
  • 图片报道文学上,我有大约30张高分辨率图片,这些图片是通过CSS加载的,因为我认为与使用'img'标签相比,它可能具有速度优势。这是30张图片之一的代码:.image-bg-fixed-height2 {display: table;width: 100%;...
  • 那么本篇文章就给大家介绍关于css 图片等比例缩放css图片等比例显示的问题。希望对有需要的朋友有所帮助。css图片等比例显示具体代码示例如下:css图片等比例显示代码示例.demo1-1 {float: left;width: 200px;...
  • 本文向大家描述一下如何使用CSS属性同比例缩小图片,一般情况下如果要把一副大图片比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。符合Web标准!CSS比例缩小图片当然,生成...
  • img{ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ ...
  • css 图片随屏幕等比例缩放

    千次阅读 2020-04-13 15:22:50
    有时我们希望图片能随屏幕大小的缩放缩放,两种情况: 单个图片缩放 图片在盒子内缩放图片缩放 <style type="text/css"> img { width: auto; height: auto; max-width: 100%; m...
  • 在实际开发过程中, 总是会遇到各种需要处理图片的情况,举个简单的例子, 用户上传头像,我们都知道头像宽高是有一定比例的, 但用户的图片千奇百怪,如果简单的按照我们设定的宽高显示,图片变形不可避免,那么该...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,222
精华内容 9,288
关键字:

css图片等比例缩小