精华内容
下载资源
问答
  • 主要介绍了微信小程序 图片宽高自适应的相关资料,需要的朋友可以参考下
  • 本篇文章主要介绍了Dropify.js图片宽高自适应的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序js的全局调用,图片宽高自适应 一:js的全局调用分享者:道之道编程路,来自原文地址1.要注意的是必须要用module.exports导出要调用属性或方法;2.使用的时候用var api = require(../../utils/api.js); ...
  • 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
  • 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
  • 如何使用css实现图片宽高自适应

    千次阅读 2018-12-06 22:06:00
    给定一系列图片,图片宽高不等,每行所展示的图片数量不等,如何实现图片的自适应。 实现方法 聪明的你肯定会想到使用flex布局,并且设置flex-wrap: wrap。但如何做到自适应宽度呢: 我们假设图片原始宽度、高度分别...

    本文主要是结合自己在学习中使用css来实现图片的宽高自适应,并给出相应的结局方案。

    场景

    给定一系列图片,图片宽高不等,每行所展示的图片数量不等,如何实现图片的自适应。

    实现方法

    聪明的你肯定会想到使用flex布局,并且设置flex-wrap: wrap。但如何做到自适应宽度呢:

    我们假设图片原始宽度、高度分别为widthheight,首先如果没有设置任何样式,那么图片高度肯定是不一样。于是设置一个参考高度200px,这样宽度就会有剩余,那么剩下的宽度如何撑满呢,使用flex-grow: width * 200 / height分别放大对应的图片(图片的放大倍数其实每张图片的宽度)。

    下面看一张实现后的效果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4puiJoTf-1582516005341)(https://raw.githubusercontent.com/abelce/staticResource/master/images/WX20181205-235101%402x.jpg)]

    代码(React)

    // list.jsx
    class List extends React.Component {
      render() {
        return (
          <div className={style.list}>
            {
              this.props.images.map((img, index) => <Item key={img.id} image={img}/>)
            }
          </div>
        )
      }
    }
    
    // item.jsx
    // 图片的参考高度设置为200px,
    class Item extends React.Component {
        // xxxxxx
      render() {
        const {
          attributes: { url, width, height },
        } = this.props.image;
    
        return (
          <div
            className={style.imageContainer}
            style={{
              width: `${(width * 200) / height}px`,
              flexGrow: (width * 200) / height,
            }}>
            <img
              src={url}
            />
            <div
              className="placeholder"
              style={{
                paddingBottom: `${(height / width) * 100}%`,
                display: loaded ? 'none' : 'block',
              }}
            />
          </div>
        );
      }
    }
    
    

    样式(scss)

    .list {
      display: flex;
      flex-wrap: wrap;
      &::after {
        content: '';
        flex-grow: 9999999;
      }
    }
    
    .imageContainer {
      display: inline-block;
      margin: 4px;  
    }
    
    PS

    上面解决了图片自适应问题,但是如果最后一行只有一张图片(或图片数量很少),最后一行的图片可能会很高,这时就可以找一个元素把剩余的空间撑起来,这样就相当于不让最后一张图片缩放或缩放的比例很小(高度维持在200px左右),使用伪元素after,并设置一个很大的flex-grow值。

    以上就是本人此次学习过程中的所得,欢迎大神交流指点。邮箱


    原文地址

    展开全文
  • RecyclerView item imageview 显示图片自适应 在item imageview xml 布局 加上如下属性 android:scaleType="fitXY" android:adjustViewBounds="true" 补充 item最外层布局高度android:layout_height="wrap_content...

    RecyclerView  item  imageview  显示图片自适应

    在item imageview xml 布局 加上如下属性
    android:scaleType="fitXY"
    android:adjustViewBounds="true"
    补充
    item最外层布局高度android:layout_height="wrap_content"
    imageview布局高度android:layout_height="wrap_content"

    Recyclerview :
    private StaggeredGridLayoutManager staggeredLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.HORIZONTAL);
    注:StaggeredGridLayoutManager(行数,布局样式(横向 纵向))

    展开全文
  • AMP图片宽高自适应 / Amp image width and height adaptation <style amp-custom> /*contain:增大或减小图像尺寸以填充框,同时保留其长宽比。*/ .plist-img img{object-fit: contain;} </style> <...

    AMP图片宽高自适应 / Amp image width and height adaptation

    <style amp-custom>
    /*contain:增大或减小图像尺寸以填充框,同时保留其长宽比。*/
    .plist-img img{object-fit: contain;}
    
    </style>
    
    <amp-img class="plist-img" layout="responsive" src="img/img01.jpg" width="100" height="50"></amp-img>
    

    在这里插入图片描述虽然AMP官方文档说将 fill 布局和css属性的 object-fit 结合使用,但是亲测了几个布局的使用好像都能用,都能保持原图比例!但是要注意的是图片的比例也是按照<amp-img width=“100” height=“50”>这里面而定的,也就是说在这个宽高为100*50的容器里面图片保持自己的宽高比而不至于变形。
    在这里插入图片描述

    可以参考的网站实例:https://css-tricks.com/almanac/properties/o/object-fit/

    展开全文
  • 在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示。 $("#myTab0_Content0 img").each(function...

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示。

    $("#myTab0_Content0 img").each(function(i){
    var img = $(this);
    var realWidth;//真实的宽度
    var realHeight;//真实的高度
    //这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
    $("<img/>").attr("src", $(img).attr("src")).load(function() {

    // 后台上传图片的真实宽高(像素)
    realWidth = this.width;
    realHeight = this.height;
    //alert(realWidth)
    //alert(realHeight)
    // 样式定义的li的宽
    var imgWcss = $('.mp5List li').width();
    //alert(imgWcss);
    // 标准的图片比例
    var imgBz = 294/220;

    // li高
    var h = imgWcss/imgBz;
    $('.mp5List li').css('height',h+'px');


    //图片太高,高自动,宽固定
    if( realWidth < realHeight){
    $(img).css({'width':imgWcss+ 'px','height':'auto' });
    // alert(imgWcss)
    //alert(1);

    }
    //图片太宽,宽自动,高固定
    if( realWidth > realHeight){
    $(img).css({'height':h+'px', 'width':'auto' });


    }
    })
    })

    转载于:https://www.cnblogs.com/mengzhilva/p/10653486.html

    展开全文
  • img图片宽高自适应

    2020-01-14 18:19:46
    如果图片大小超出盒子大小,等比例缩放使图片全部显示出来的前提下,使图片的尺寸最大。 <style> .div1 { width: 300px; height: 100px; background: red; } .bg1{ /* 这种不会失真 */ max...
  • .banner { width: 100%; background: url(/image/excellentCase/banner_pc.png?v=202106151044) no-... } 图片的像素为:3840 x 602 计算百分比:602 / 3840 约等于 16 原理:padding的百分比是依据元素的宽度
  • 使用环境: 1类似朋友圈之类的功能,单张图显示。 使用方法: <ImageView android:id="@+id/ivModuleMp4" onClickCommand="@{viewModel.baseClick}" android:layo...
  • img{ max-width: 188px; max-height: 106px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  • Layout图片宽高自适应

    2016-10-06 19:49:59
    孩子的最终真实宽高 int childWidth = width - getPaddingLeft() - getPaddingRight(); int childHeight = totalHeight - getPaddingTop() - getPaddingBottom(); // int childWidthSpec = MeasureSpec....
  • 很多时候图片宽高比不固定,而且作为一个前端,最好不要去写死图片的宽。会给自己找麻烦。 html: <div class="boxs"> <div class="devices-box"> <div class="image-box"> <img src="./...
  • 图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性。下面咱们在网上找两张宽不一样的照片:No.1 No.2 从上图看一个宽的一个窄的,很难做到自适应,无奈可恶的产品经理,只能自己想办法了请看下面...
  • 1, 主要思路是,在图片 onload 后,将图片宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是还是不足以填充容器 3,将不足以填充容器的方向设置为和容器一致 4,此时,图片的另一个方向...
  • 微信小程序 图片宽高自适应

    千次阅读 2017-05-05 16:29:16
    <image src="url" class="imgClass" model="aspectFit" bindload="imageLoad" />1...以前将小程序图片宽度设置为屏幕宽度:imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,631
精华内容 10,652
关键字:

图片宽高自适应