做成背景图片

单个

.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. BZOJ4671:异或图

    传送门 直接求连通的不好做,考虑容斥 设 \(g_i\) 表示至少有 \(i\) 个连通块的方案数,\(f_i\) 表示恰好有 \(i\) 个的 那么 \[g_x=\sum_{i=x}^{n}\beg ...

  2. Http Status Code 套餐合集(转载)

    1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 100(继续)请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101(切换协议)请求者已要 ...

  3. css 关闭按钮实现

    通过css的伪元素:before,:after以及transform: rotate(45deg);旋转来实现(支持IE9及其以上版本) <div class="close" ...

  4. Oql实体转自定义对象

    返回单体: GroupEnvironmentDTO 是自定义的一个DTO, GroupEnvironmentEntity.MapToPOCO(dto);  把上述查出来的对象转换为DTO 返回实体集合 ...

  5. 安卓app开发-04- app运行的运行和调试

    app 运行的运行和调试 本篇介绍在 Android Studio 开发工具,运行调试设备:真机和虚拟机. 真机调试(USB 连接手机) 尽量使用真机进行调试,无论是调试效果和速度都比模拟器要好.使用 ...

  6. androidandroid中的通过网页链接打开本地app

    http://blog.csdn.net/zjlovety/article/details/54847980 <html> <head> <meta http-equiv ...

  7. 1、Docker 架构详解

    本文来自clouldman ,有增删. Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image ...

  8. java一些使用

    随机数.输入.byte数组和string转换 一些可能会使用到的方法.供及时查找 ########################random类使用 Random random = new Rando ...

  9. redis连接被拒绝

    1,服务未启动: 执行:lsof -i :6379 isof-i命令查看是否开启进程 结果如下,证明开启 COMMAND     PID USER   FD   TYPE DEVICE SIZE/OF ...

  10. hql to_number

    select max(cast(o.ordernum,int)) from className o or select max(cast(o.ordernum as int)) from classN ...