精华内容
下载资源
问答
  • 在小程序布局中,如果图片不是固定高度高度,但image设置的是固定的高度宽度,这时候原始图片相对image设置的固定高度宽度不是等比例大小,那么这张图片就会变形,变的不清晰。  这时就可以使用下面的等比例...
  • 用jq根据图片的宽度比例设置图片高度,有时图片宽度好控制,但高度一般都是auto,如果为了自适应,不方便直接设置图片的高度heght,可以用下载的方法     <img src="111.jpg" class="...

    用jq根据图片的宽度同比例设置图片高度,有时图片宽度好控制,但高度一般都是auto,如果为了自适应,不方便直接设置图片的高度heght,可以用下载的方法

     

     

    <img src="111.jpg" class="attachment-thumbnail />

     

     

     

     

     

     

    <script type="text/javascript">
    	$(function(){
    	var img = $(".attachment-thumbnail");
    	realWidth =img.width();//alert(realWidth);
    	realHeight = realWidth*0.8;
    	img.css({height:realHeight});
    	});
      </script>

     

     

     

     

    展开全文
  • 在小程序布局中,如果图片不是固定高度高度,但image设置的是固定的高度宽度,这时候原始图片相对image设置的固定高度宽度不是等比例大小,那么这张图片就会变形,变的不清晰。这时就可以使用下面的等比例缩放...

    转载请注明预见才能遇见的博客:http://my.csdn.net/

    原文地址:http://blog.csdn.net/pcaxb/article/details/56292373

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 

    在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等。

    1.图片等比例缩放工具

    //Util.js
    
    class Util{
    
        /***
         * 按照显示图片的宽等比例缩放得到显示图片的高
         * @params originalWidth  原始图片的宽
         * @params originalHeight 原始图片的高
         * @params imageWidth     显示图片的宽,如果不传就使用屏幕的宽
         * 返回图片的宽高对象
        ***/
        static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){
            let imageSize = {};
            if(imageWidth){
                imageSize.imageWidth = imageWidth;
                imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
            }else{//如果没有传imageWidth,使用屏幕的宽
                wx.getSystemInfo({  
                    success: function (res) {  
                        imageWidth = res.windowWidth;  
                        imageSize.imageWidth = imageWidth;
                        imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
                    }  
                });
            }
            return imageSize;
        }
    
        /***
         * 按照显示图片的高等比例缩放得到显示图片的宽
         * @params originalWidth  原始图片的宽
         * @params originalHeight 原始图片的高
         * @params imageHeight    显示图片的高,如果不传就使用屏幕的高
         * 返回图片的宽高对象
        ***/
        static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){
            let imageSize = {};
            if(imageHeight){
                imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;
                imageSize.imageHeight = imageHeight;
            }else{//如果没有传imageHeight,使用屏幕的高
                wx.getSystemInfo({  
                    success: function (res) {  
                        imageHeight = res.windowHeight;
                        imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;
                        imageSize.imageHeight = imageHeight;
                    }  
                });
            }
            return imageSize;
        }
    
    }
    
    export default Util;

    2.使用image组件加载图片,通过bindload动态的获取图片的高度和宽度,动态的设置图片的高度和宽度

    index.wxml  (../pro.png是本地图片)

    <image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>
    

    index.js

    import Util from '../common/Util';
    
    Page({
      data:{
            imageWidth:0,
            imageHeight:0
      },
      imageLoad: function (e) {  
            //获取图片的原始宽度和高度
            let originalWidth = e.detail.width;
            let originalHeight = e.detail.height;
            //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);
    
            //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);
            let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);
    
            this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});  
      }
    }) 

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 

    博客地址:http://blog.csdn.net/pcaxb/article/details/56292373




    展开全文
  • 图片按照指定的宽度或者高度比例压缩图片,根据裁剪的坐标以及图片的大小裁剪图片
  • 微信小程序图片比例缩放 动态的获取图片高度宽度 动态的设置图片高度宽度 前言: 在小程序布局中,如果图片不是固定高度高度,但image设置的是固定的高度宽度,这时候原始图片相对image设置的固定...
  • ImageView图片宽度为控件宽度高度比例缩放 图片宽度固定,高度比例缩放自适应 本身不知道图片宽度高度  首先,定义ImageView,在该ImageView中,我们需要设置属性android:...

    ImageView图片宽度为控件宽度,高度按比例缩放

    图片宽度固定,高度按比例缩放自适应

    本身不知道图片宽度和高度


     首先,定义ImageView,在该ImageView中,我们需要设置属性android:adjustViewBounds="true",他的意思图片是否保持宽高比。切记的一点是该属性需要与maxWidth、MaxHeight一起使用,否则单独使用没有效果。 

     

    [html]  view plain  copy
    1. <ImageView  
    2.        android:id="@+id/img_list"  
    3.        android:layout_width="fill_parent"  
    4.        android:layout_height="wrap_content"  
    5.        android:scaleType="centerCrop"  
    6.        android:adjustViewBounds="true"  
    7.        android:src="@drawable/load_default_img" />  

    android:adjustViewBounds="true"必须与MaxHeight一起使用才能有效,所以,我要设置该ImageView的最大高度MaxHeight:
    [html]  view plain  copy
    1. int screenWidth = getScreenWidth(this); // 获取屏幕宽度  
    2. ViewGroup.LayoutParams lp = testImage.getLayoutParams();  
    3. lp.width = screenWidth;  
    4. lp.height = LayoutParams.WRAP_CONTENT;  
    5. testImage.setLayoutParams(lp);  
    6.   
    7. testImage.setMaxWidth(screenWidth);  
    8. testImage.setMaxHeight(screenWidth * 5); //这里其实可以根据需求而定,我这里测试为最大宽度的5倍 
    展开全文
  • 图片宽度的时候,图片高度会随着宽度比例缩放!    Document      html,body {  height:100%;  }  ul {  width:100%;  }  li {

    当图片有宽度的时候,图片的高度会随着宽度成比例缩放!

    <!-- <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css">
        <style>
            html,body {
                height:100%;
            }
            ul {
                width:100%;

            }
            li {
                width:20%;
                float:left;
                margin-left: 4%;
            }
            img {
                width:100%;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <img src="img/rentou.png" alt="">
            </li>
            <li>
                <img src="img/rentou.png" alt="">
            </li>
            <li>
                <img src="img/rentou.png" alt="">
            </li>
            <li>
                <img src="img/rentou.png" alt="">
            </li>
        </ul>

    </body>
    </html> -->

    展开全文
  • ImageView 中有个 scaleType 属性,设置图片在 view 中的缩放方式,本来以为 fit_center 可以实现,结果很无语,莫名其妙,没能实现宽度贴合容器宽度,两侧都是空白区域。ImageView.ScaleType设置图解解决方法:1. ...
  • 图片宽度固定,高度比例缩放自适应。本身不知道图片宽度高度  首先,定义ImageView,在该ImageView中,我们需要设置属性android:adjustViewBounds="true",他的意思图片是否保持宽高比。切记的一点是...
  • 设置背景图片宽度高度

    千次阅读 2017-06-30 13:24:12
    设置背景图片宽度高度
  • 高度设置成百分比时,其高度是基于父元素来定的,设置成50%,就是将该元素高度设置成 父元素的高度值 x 50%。 但是将高度设置成百分比时,往往是不生效的!高度依然为0,这是为啥? 道理很简单,那就是父元素的...
  • Android设置ImageView宽度固定,其高度比例缩放适应。。。
  • CSS图片宽度设置百分比 , 高度宽度相同
  • 在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实现这样的效果,只有自己动手...
  • H5图片高度根据宽度自适应

    千次阅读 2021-01-08 16:55:48
    每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应。 下面看看实现代码: 下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H5场景,就通过...
  • ImageView 宽度设定,高度比例缩放
  • '调整图片高度宽度等于单元格宽度 Sub setpic() Dim Pic As Shape  For Each Pic In Sheet5.Shapes  Pic.LockAspectRatio = msoFalse  Pic.Top = Pic.TopLeftCell.Top  Pic.Left = Pic.TopLeftCell.L
  • <!... height:300px; padding:10px; background-color... 这可以解决写死图片存放区,无论后台传过来什么样的图片,前端都可以在给定大小盒子里放图片,且是按比例存放的,不过这样也会出现图片被压缩的问题。
  • 本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考,具体如下: 一. 了解image组件 由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面...
  • 根据固定的宽度高度缩放图片,当图片宽度大于高度时,按照宽度的固定值等比例缩放,当图片高度大于宽度时,按高度的固定值等比例缩放; public static Bitmap getImageThumbnail(String imagePath, int ...
  • 实现思路:获取图片原始宽高,已知宽度便可已计算出目标高度。 Glide设置ImageView的src,或View的background drawable高:resource.getIntrinsicHeight() drawable宽:resource.getIntrinsicWidth() bitmap宽...
  • 微信小程序image图片自适应宽度比例显示的方法
  • css 高度宽度比例变化

    万次阅读 2018-02-23 11:07:58
    使用 padding-bottom 来代替 height 来实现高度宽度比例的效果,将 padding-bottom设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bo...
  • 1、js 通过计算屏幕宽度 根据图片的宽高度比例来计算高度 来调整div等标签的尺寸 2、使用rem作为单位,提前根据款高比在css写死宽高度 3、使用css样式,代码如下 以下解决方为CSS方式      .Header  {  ...
  • 显示宽度满屏,高度宽度比例 1:1 把图片拉成正方形 需要添加两个参数。 android:id="@+id/iv_test" android:layout_width="fill_parent" android:layout_height="wrap_content" android:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,905
精华内容 21,562
关键字:

如何设置图片的高度宽度比例