需求:

  上传图片并实现预览, 图片以最小边为标准填满正方形的父级div,且不变形,且点击可以预览大图.

  有两种实现方式:

  1.div+img标签, 利用object-fit:cover,据说兼容性不好,但在手机上安卓和IOS暂无发现问题.

//HTML
<div>
<img :src="item.imgUrl" v-if="item.imgUrl" class="upload_warp_img" @click="getShowImg($event,index)"/>
</div>

//CSS
 div{
border: 1px solid #ccc;
width: 100px;
height: 100px; }
.file-border .upload_warp_img{
width: 100%;
height: 100%;
object-fit:cover;
}

这样会出现一个问题,当img src为空时设置宽高,会显示失败图标,如下:

  我是依据imgUrl是否存在用v-if控制触发上传还是预览的,不过预览事件是加在Img上的.

  这样设置默认有图片,点击方框的时候是预览模式,而非上传照片.

  后面解决也是考虑了两种方式,:

    一是点击事件加到父级div上.

    二是同样用用v-if控制img的上传与隐藏.失败的img隐藏了就不会触发预览事件了.

  2. 就是利用背景定位了, 加上background-size: cover;

  此种方法可以解决一部分问题,但是不能全部选择这种方式.

  和用户相关的比较重要的图片还是以img标签显示为好.

div{
width:100px;
height:100px;
border:1px solid #ccc;
background:url('111.jpg') no-repeat center;
background-size: cover;
}

  因我采取了第一种方式,第二种未来得及验证src为空的时候有副作用不.

  暂时知道这两种方式,如有其它方式,请多多指教,先酱紫~

image以最小边为标准填满正方形父级元素的更多相关文章

  1. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  2. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  3. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  4. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  5. video自动填充满父级元素

    想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可. obj ...

  6. css ~ a标签占满父级元素

    width: 100%; height: 100%; display: block;

  7. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  8. datagridview随窗体的大小而变,表格填满控件

    在C#winform布局的时候,我们拖一个datagridview到窗体上面,将datagridview调整为适合窗体的大小,但是我们运行之后,点击最大化按钮的时候,却发现datagridview的大 ...

  9. [WP8] ListBox的Item宽度自动填满

    [WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...

随机推荐

  1. Talented Chef ZOJ - 3778

    As we all know, Coach Gao is a talented chef, because he is able to cook M dishes in the same time. ...

  2. shell expr match

    expr match "$pwrdm_stat" ".*,\($pwr_state:[0-9]*\)" 不理解 从字符串开始的位置匹配子串的长度   expr ...

  3. STM32硬件IIC (转)

    源: STM32硬件IIC

  4. selenium使用location定位元素坐标偏差

    python+selenium+Chromedriver使用location定位元素坐标偏差使用xpath定位元素,用.location获取坐标值,截取网页截图的一部分出现偏差. 之所以会出现这个坐标 ...

  5. 启动项详解和更改deepin启动内核的方法

    内容来自网上查找和总结以及自己的尝试 boot里面的启动项是根据其它文件生成的,如果改boot里面,会在你更新grub后再次回到原来的状态.(之后 我(有显卡驱动问题的用户)通过在开机时选择系统页面按 ...

  6. Golang利用select和普通函数分别实现斐波那契数列

    //斐波那契数列 //1 1 2 3 5 8 //观察规律 //第一轮:前两个数是1,1,相加等于2 //第二轮:第二个数和第三个数是1,2,相加等于3 //第三轮:第三个数和第四个数是2,3,相加等 ...

  7. k8s build new API

    apiserver-builder git hub api conventions storage api arch step by step,   we can follow it. api con ...

  8. Lottie的json动画

    我们的设计如是说: Lottie的json动画,优缺点有 优点: 1.开发成本低,动画的还原度高.设计师导出 json 文件后,交付开发.原本要1天甚至更久的动画实现,现在只要不到一小时甚至更少时间了 ...

  9. log4j的基本使用方法

    本文转载自http://www.codeceo.com/article/log4j-usage.html 一.基本用法 1.log4j需要jar包log4j-1.2.14.jar,链接: http:/ ...

  10. Python3基础 list [] 创建空列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...