做成背景图片

单个

.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. 前端面试经典题目(HTML+CSS)二

    1.浏览器页面由哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaSc ...

  2. php 生成唯一id的几种解决方法(实例)

    php 生成唯一id,网上查了下,有很多的方法 1.md5(time() . mt_rand(1,1000000)); 这种方法有一定的概率会出现重复 2.php内置函数uniqid() uniqid ...

  3. java中静态代码块的用法和static用法(转)

    (一)java 静态代码块 静态方法区别 一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程 ...

  4. c# 序列化接口(转载贴)

    http://www.cnblogs.com/TianFang/p/3724449.html

  5. Codeforces Round #417 C. Sagheer and Nubian Market

    C. Sagheer and Nubian Market time limit per test  2 seconds memory limit per test  256 megabytes   O ...

  6. prince2的市场使用规模有多大?

    PRINCE2的使用和应用非常广泛.在过去的12个月里,超过60,000人参加了PRINCE2基础资格(Foundation)或从业资格(Practitioner)考试.现在每周参加考试的人数超过了2 ...

  7. MyBatis基本配置和实践(一)

    第一步:创建Java工程和数据库表user 第二步:使用Maven管理项目依赖 第三步:在resources目录下加入log4j.properties 第四步:在resources目录下加入SqlMa ...

  8. hbase shell基础和常用命令详解

    HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...

  9. EF学习之CodeFirst(二)--数据迁移

    使用CodeFirst时,如果Model发生改变的话,例如我们给User类里面新加个Sex属性,运行时会出现如下错误: 这时我们需要使用数据迁移来将model的改变同步更新到数据库中. 1.启用数据迁 ...

  10. 《C++ Primer Plus》读书笔记之五—函数-C++的编程模块

    函数-C++的编程模块   1.C++对于返回值的类型有一定的限制:不能是数组,但可以是其他任何类型——整数.浮点数.指针,甚至可以是结构和对象(有趣的是,虽然C++函数不能直接返回数组,但可以将数组 ...