做成背景图片

单个

.imgdiv {
width: 100px; // 你要的正方形
height: 100px; // 你要的正方形
background-image: url(/your/image/path.jpg);
background-position: center center; // 居中
background-size: cover; // 填满div
background-repeat: no-repeat;
} 多个循环时:
<div class="img"   :style="{background: `url(${item.goodsMainImage})50% 50% / cover no-repeat`}">
</div>

css让不同大小的图片适应div的大小,且不变形。的更多相关文章

  1. 使div下的图片自适应div的大小

    div img{ max-width:100%; height:auto; } 这里div 要给固定的宽度 开始这里还想了半天 用网上的方法也不行 问老大 又一句话就给我解决了...老大真男神啊!!! ...

  2. css文件 如何使背景图片大小适应div的大小

    对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...

  3. div css 伪类 不固定图片大小 居中, css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

  4. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  5. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  6. DIV+CSS 让同一行的图片和文字对齐

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  7. css未知大小的图片居中

    未知大小的图片在指定大小的div盒子中垂直水平居中: 无需要JS <style> .box { /*垂直居中*/ display: table-cell; vertical-align:m ...

  8. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  9. css背景图片充满DIV

    最近接手前端页面,让给调样式.哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一. 页面上 ...

随机推荐

  1. css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

    高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...

  2. ArcGIS最权威、最专业的技术分享网站:积思园(www.iarcgis.com)

    你对iArcGIS.com说点什么 为什么会有该网站的产生 在这个所谓的“大数据”的时代,每个人都深陷于海量信息无法自拔,因为过多碎片化的数据只会让自己的思维更加迷离,快餐式的阅读只会让自己变得虚胖. ...

  3. Android的事件分发(dispatchTouchEvent),拦截(onInterceptTouchEvent)与处理(onTouchEvent)

    在Android中,View的结构是树状的,所以,当触发触摸事件的时候,其事件传递也是从上之下一层层的传递.下面我们结合例子来一点点进行分析. 首先,我们需要了解事件处理中的几个方法: 1.在View ...

  4. Android解析WindowManager(二)Window的属性

    前言 在上一篇文章我们学习了WindowManager体系,了解了Window和WindowManager之间的关系,这一篇我们接着来学习Window的属性. 1.概述 上一篇文章中我们讲过了Wind ...

  5. Java和C# RSA加解密相互通信和使用公钥加密传输

    关于JAVA和C#加解密通讯的话,可以用这个BouncyCastle插件,会帮助你解决很多问题 http://www.bouncycastle.org/ //c#使用java给的公钥进行rsa加密 p ...

  6. hibernate对象的三种状态及转换

    一.hibernate对象三种状态 Transient(瞬时状态):没有session管理,同时数据库没有对应记录 举例:new 出来的对象还没有被session管理,此时该对象处于Transient ...

  7. 8086 CPU 寄存器简介

    转载:http://www.cnblogs.com/BoyXiao/archive/2010/11/20/1882716.html 引子 打算写几篇稍近底层或者说是基础的博文,浅要介绍或者说是回顾一些 ...

  8. 沉淀再出发:kafka初探

    沉淀再出发:kafka初探 一.前言 从我们接触大数据开始,可能绕在耳边的词汇里面出现的次数越来越多的就包括kfaka了.kafka的设计初衷是希望作为一个统一的信息收集平台,能够实时的收集反馈信息, ...

  9. windows系统镜像 微软官方资源便捷下载教程

    今天跟小师弟学到了一个下载软件的好办法,省得到各种网站下载带有病毒,插件的资源. 这个神奇的网站叫做   MSDN, 我告诉你,这是一个私人维护的网站,里面有各种官方软件的下载地址.可以直接用下载工具 ...

  10. August 25th 2017 Week 34th Friday

    Stop to have a rest, do not forget others still in the running. 停下来休息的时候,不要忘记别人还在奔跑. You don't need ...