资讯专栏INFORMATION COLUMN

css让不同大小的图片适应div的大小,且不变形。

娣辩孩 / 3290人阅读

摘要:做成背景图片单个你要的正方形你要的正方形居中填满多个循环时

做成背景图片

单个

.imgdiv {
    width: 100px;     // 你要的正方形
    height: 100px;    // 你要的正方形
    background-image: url(/your/image/path.jpg);
    background-position: center center;    // 居中
    background-size: cover;                // 填满div
    background-repeat: no-repeat;
}

多个循环时:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2284.html

相关文章

  • CSS练习】IT修真院--练习5-护工个人界面

    摘要:任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍,查缺 任务五、 一个最常见的移动端页面 完成的事情 float学习 张鑫旭《CSS世界》相关章节 张鑫旭 float系列 了解CSS通配符 &...

    Jonathan Shieber 评论0 收藏0
  • CSS世界》笔记一:流/元素/尺寸

    摘要:一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局,传统设计,网页上的所有元素的尺寸一律使用作为单位。世界中,提出了流体布局的概念所谓流体布局,指的是利用元素流的特性实现的各类布局效果。 下一篇:《CSS世界》笔记二:盒模型四大家族 写在前面 初读《CSS世界》还是在深圳,属于换工作前的充能。那时候除了工作,其他时间基本都在这本书里了,因为它的确吸引人。之前看过《CSS揭密》...

    hizengzeng 评论0 收藏0
  • CSS题目及答案整理

    摘要:解决方案为加上使其形成,根据规则第六条,计算高度时就会计算的元素的高度,达到清除浮动影响的效果。并为这个外层元素设置,使其形成。生成相对定位的元素,相对于其正常位置进行定位。它的所有子元素自动成为容器成员,称为项目,简称项目。 原文链接在这里 CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型(相当于box-sizing: bor...

    lijy91 评论0 收藏0
  • css绘制各种形状

    摘要:同样的方法可以实现下面这种布局具体代码如下通过把改成或,就可以立即得到左侧倾斜或右侧倾斜的标签页。简单的饼图的绘制思路是把圆形的左右两部分指定为上述两种颜色,然后用伪元素覆盖上去,通过旋转来决定露出多大的扇区。 自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性;border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不...

    Lionad-Morotar 评论0 收藏0
  • 文档流&文字&CSS常用命令

    摘要:文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流,宽度不够,之字形,且元素会被截断块元素从上往下流动,一排一排注意事项内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移,不会被打断若想打断上述联结,请使用属性想打断的内联元 文档流 文档流就是文档内元素流动方向 流动方向 内联元素从左往右流,宽度不够,之字形,且元素会被截断 块元素从上往下流动,一排一排 sho...

    zebrayoung 评论0 收藏0

发表评论

0条评论

娣辩孩

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<