做成背景图片

单个

.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. javascript实现深克隆的几种方法

    1)普通函数实现 function cloneObject(obj) { if (obj === null || typeof obj !== 'object') { return obj; } va ...

  2. js比较好的一些方法

    js里面有些方法比较容易忘记,但却很实用,很好用的一些方法.在此记录: 1.Math.ceil(x) — 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入 2.Math.floor(x)– ...

  3. Django实现验证码

    简单搞定生成验证码: 1.views.py from io import BytesIO import random from PIL import Image,ImageDraw,ImageFont ...

  4. 初级篇html。

    什么是html?  超文本标记语言,标准通用标记语言下的一个应用. “超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括“头”部分(英语:Head).和“主 ...

  5. C# 字符串中英文对齐

    StringBuilder str = new StringBuilder(); str.AppendFormat( - Encoding.Default.GetBytes(); str.Append ...

  6. ssm 注解@ResponseBody 返回json 乱码问题

    方法一:在@RequestMapping上加入 produces方法 @RequestMapping(value = "/upload.do",method = RequestMe ...

  7. Wasserstein GAN最新进展:从weight clipping到gradient penalty,更加先进的Lipschitz限制手法

    前段时间,Wasserstein GAN以其精巧的理论分析.简单至极的算法实现.出色的实验效果,在GAN研究圈内掀起了一阵热潮(对WGAN不熟悉的读者,可以参考我之前写的介绍文章:令人拍案叫绝的Was ...

  8. Codeforces Round #417 B. Sagheer, the Hausmeister

    B. Sagheer, the Hausmeister time limit per test  1 second memory limit per test  256 megabytes   Som ...

  9. JavaScript 小实例 - 表单输入内容检测,对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  10. Python交互式编辑器ipthon notebook jupyter

    简介 IPython NoteBook(jupyter)是一个综合的交互式编程环境,比原本python命令进入的交互式环境要强大很多,总之就是炫酷加实用,浏览器中写Python代码,访问源端linux ...