做成背景图片

单个

.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. 关于StringBuffe()长度和初始化长度的问题归纳

    晚上做一个习题,发现了一个关于StringBuffer()长度的问题 根据理解大致可以归为以下知识. 直接上代码分析吧 public class StringBuffer_length_capacit ...

  2. java多线程中的死锁、活锁、饥饿、无锁都是什么鬼?

    死锁.活锁.饥饿是关于多线程是否活跃出现的运行阻塞障碍问题,如果线程出现了这三种情况,即线程不再活跃,不能再正常地执行下去了. 死锁 死锁是多线程中最差的一种情况,多个线程相互占用对方的资源的锁,而又 ...

  3. 实用的 Chrome Developers Tools

    做前端的,都喜欢 chrome , 里面的开发工具也很实用,网上看到文章不错,部分摘来分享 ------------------------------- console.log,中包含一些格式化的指 ...

  4. flask介绍

    安装flask pip3 install flask 短小精悍.可扩展强 的一个Web框架. 牛逼点:上下文管理机制 依赖wsgi: werkzeug(相当于Django的wsgi):只要安装flas ...

  5. Linux常用命令(三)————创建+删除+设置权限

    1. mkdir mkdir [选项] DirName 命令中的[选项]: -m    用于对新建目录设置存取权限,也可以用 chmod 命令进行设置. -p     需要时创建上层文件夹(或目录), ...

  6. MSSQL->serverlink[Oracle]

    需求描述:     SQL Server数据库连接Oracle数据库   条件准备:     SQL Server数据库,SQL Server 2008R2     Oracle数据库,Oracle ...

  7. vue从安装到初始化项目

  8. [翻译] CNPGridMenu

    CNPGridMenu CNPGridMenu is a Mailbox style grid menu with a blurred background for iOS 7 & iOS 8 ...

  9. Python学习---列表/元组/字典/字符串/set集合/深浅拷贝1207【all】

    1.列表 2.元组 3.字典 4.字符串 5.set集合 6.深浅拷贝

  10. 微软最新设计Fluent Design System初体验

    微软最新设计Fluent Design System初体验 本文图片不全!建议移步知乎专栏查看!!! https://zhuanlan.zhihu.com/p/30582886 原创 2017-11- ...