做成背景图片

单个

.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. python gif动态图的合成

    1.确保imageio已经安装 pip install imageio 2.函数准备 def create_gif(image_list, gif_name): import imageio fram ...

  2. js-js的语句

    - Java里面的语句: ** if判断 *** =:表示赋值 *** ==:表示判断 ** switch语句 ** 循环 for while do-while - js里面的也是这些语句 ** if ...

  3. Windows 环境下 NodeJs 开发 Log

    安装 NodeJs, npm. 环境变量配置. 1, Grunt 安装 :  npm install -g grunt-clinpm install -g grunt package.json { & ...

  4. 学习servlet心得

    1,关于字符编码问题: // resp.setCharacterEncoding("UTF-8");//这个的作用仅仅只是输出字符,不做格式转换成HTML // resp.setC ...

  5. Maximum Depth of Binary Tree 二叉树的深度

    Given a binary tree,find its maximum depth. The maximum depth is the number of nodes along the longe ...

  6. spring boot(7)-mybatis全注解化

    关于配置数据库可以参考上一篇文章,这里只讲mybatis pom.xml <!-- 引入mybatis --> <dependency> <groupId>org. ...

  7. IIS支持http协议的:put、delete等方法

    HTTP常见方法:DELETE, GET, HEAD, OPTIONS, POST, PUT, PATCH 以下是从网上搜索的方法:其实经过测试,只配置最后那个web.config就可以实现这个功能: ...

  8. DockerFile简介以及使用

    DockerFile是用来构建docker镜像的构建文件,是有一系列命令和参数构成的脚本 构建的三步骤:编写dockerfile文件→build构建→docker run dockerfile保留字指 ...

  9. 【Oracle】Update方法

    1.单表更新 update customers set city_name='山西省太原市' where city_name='山西太原' 2.两表(多表)关联update -- 被修改值由另一个表运 ...

  10. jQuery 小案例

    用jquery实现  百度换肤的模式; <!DOCTYPE html> <html lang="en"> <head> <meta cha ...