环境:vue.js,aui.css,apicloud

1.没做控制之前。图片真实长度宽度。

2.下面用js控制高度

js部分

//js 部分
//先动态的获取属性宽度
var box4_col3 = document.getElementsByClassName("aui-col-xs-4")[0];
vm.col3 = window.getComputedStyle(box4_col3).width; //vue绑定数据
var vm = new Vue({
el: '#app',
data: {
col3:'',
}
})

css部分

  <div class="aui-col-xs-4" v-for="(img, index) in item.for_img"   v-bind:style=" 'overflow:hidden; height:' + col3 ">
<img :src="xxxx" onclick="open_img_big( item.for_img, index )"/>
</div>

控制后 长大于宽的部分自动隐藏,但是宽大于长的会有空白显示

3.给定义 宽高100%,图片形变压缩了

                            <div class="aui-col-xs-4" v-for="(img, index) in item.for_img"
v-bind:style=" 'overflow:hidden; height:' + col3 ">
<img :src="qiniu + img.qiniu_img" width="100%" height="100%"
onclick="open_img_big( item.for_img, index )"/>
</div>

4.调了很久,发现七牛云有缩略图配置

我的后台图片保存用到了七牛云存储,在七牛图片加上后缀 自动居中裁剪成 正方形

?imageView2/1/w/300/h/300/q/80|imageslim

以上完美显示!!!

APP---发布动态、朋友圈类似,多张图片动响应式正方形展示布局 vue.js,aui.css,apiclouv的更多相关文章

  1. Android中Xposed框架篇-微信实现本地视频发布到朋友圈功能

    微信非常庞大,还好有一些强大的工具,下面就来总结收获的知识. 一.使用adb shell dumpsys activity top命令快速定位页面 二.使用Jadx进行方法跟踪时候如果发现没有结果,可 ...

  2. Android微信朋友圈全文、收起功能

    在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...

  3. Android仿微信朋友圈,全文收起功能,附源码

    在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...

  4. 用Python搞定九宫格式的朋友圈。内附“马云”朋友圈

    PIL(Python Imaging Library)是一个非常强大的Python库,但是它支持Python2.X, 在Python3中则使用的是Pillow库,它是从PIL中fork出来的一个分支. ...

  5. css实现朋友圈照片排列布局

    纯css实现朋友圈不同数量图片不同布局 首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例: 可以发现 除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列: 假设有如下HTM ...

  6. 微信内测"微视频" 朋友圈可以发6-8秒短视频

    我们在发朋友圈时现在只能发文字和图片,图片又分为从相册中选择和直接拍摄照片,以后朋友圈拍6-8秒短视频可能是一种新的内容形式,作为文字和图片外的补充.因为微信开始内测新功能“微视频”,其产品理念与微视 ...

  7. 微信小程序分享至朋友圈的方法

    最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...

  8. Foundation 5 发布!最先进的响应式前端框架

    数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架.Foundation 是第一个响应式.语义化和移动优先的开源框架.最新发布的 Foundation 5 是最先 ...

  9. APP分享多张图片到微信和朋友圈

    产品需求: 微信分享多图至好友,朋友圈.由于微信禁用了分享9图至朋友圈功能,这里分享微信只是将图片保存至本地,具体让用户手动分享. 问题分析: 微信没有提供分享多图的SDK,因此我们实现调用系统自带的 ...

随机推荐

  1. RxSwift学习笔记2:Observable/生命周期/Event/oneNext/onError/onCompleted/

     Observable 是 Rx 的根基 官网:http://reactivex.io/ github地址:https://github.com/ReactiveX/RxSwift Observabl ...

  2. poj2828 线段树单点更新

    Buy Tickets Time Limit: 4000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java ...

  3. Hibernate在PostgreSQL上执行sum函数导致数据失真的问题

    有一段通过Hibernate从PostgreSQL上进行sum统计的简单代码,但统计结果却导致数据失真,不知原因何在,求指教! Java代码片段如下: public List<Object> ...

  4. Page_Load是怎样被执行的

    关于Asp.Net的生命周期的文章,很多很多,不管是管道生命周期,还是页面生命周期,图文并茂的文章并不少,我就不说了,我只是在复习这些知识点的时候,想具体知道一个页面的Page_Load方法到底是怎么 ...

  5. WPF 介绍一种在MVVM模式下弹出子窗体的方式

    主要是通过一个WindowManager管理类,在window后台代码中通过WindowManager注册需要弹出的窗体类型,在ViewModel通过WindowManager的Show方法,显示出来 ...

  6. AJPFX:外汇的技术面分析

    AJPFX平台:开设外汇保证金交易账户以及入金之后,通常就可以开始交易了,但是在选择买卖时点时通常会依据两种分析,两种主要分析方法通常会被称为基本面分析和技术分析.基本面分析注重金融,经济理论和政局发 ...

  7. iOS数据持久化--归档

    一.简介 在使用plist进行数据存储和读取,只适用于系统自带的一些常用类型才能用,且必须先获取路径相对麻烦: 偏好设置(将所有的东西都保存在同一个文件夹下面,且主要用于存储应用的设置信息 归档:因为 ...

  8. Selenium3 + Python3自动化测试系列三——控制浏览器操作

    控制浏览器操作 控制浏览器窗口大小 在测试过程中,我们在打开浏览器后,根据需求可自定义调整浏览器的尺寸大小.WebDriver提供了set_window_size()方法来设置浏览器的大小. 如果页面 ...

  9. WebDriver高级应用实例(3)

    3.1自动化下载某个文件 被测网页的网址: https://pypi.org/project/selenium/#files Java语言版本的API实例代码 import java.util.Has ...

  10. 调用的执行器“executor://mstestadapter/v2”时发生异常: 无法找到程序集“log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a”

    加上下面的一句就好了 [TestCleanup]      public void cleanup()      {          CallContext.FreeNamedDataSlot(&q ...