css让不同大小的图片适应div的大小,且不变形。
做成背景图片
单个
.imgdiv {
width: 100px; // 你要的正方形
height: 100px; // 你要的正方形
background-image: url(/your/image/path.jpg);
background-position: center center; // 居中
background-size: cover; // 填满div
background-repeat: no-repeat;
}
多个循环时:
css让不同大小的图片适应div的大小,且不变形。的更多相关文章
- 使div下的图片自适应div的大小
div img{ max-width:100%; height:auto; } 这里div 要给固定的宽度 开始这里还想了半天 用网上的方法也不行 问老大 又一句话就给我解决了...老大真男神啊!!! ...
- css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...
- div css 伪类 不固定图片大小 居中, css div 实现三角形
div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- DIV+CSS 让同一行的图片和文字对齐
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- css未知大小的图片居中
未知大小的图片在指定大小的div盒子中垂直水平居中: 无需要JS <style> .box { /*垂直居中*/ display: table-cell; vertical-align:m ...
- DIV+CSS 让同一行的图片和文字对齐【转藏】
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
- css背景图片充满DIV
最近接手前端页面,让给调样式.哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一. 页面上 ...
随机推荐
- 前端面试经典题目(HTML+CSS)二
1.浏览器页面由哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaSc ...
- php 生成唯一id的几种解决方法(实例)
php 生成唯一id,网上查了下,有很多的方法 1.md5(time() . mt_rand(1,1000000)); 这种方法有一定的概率会出现重复 2.php内置函数uniqid() uniqid ...
- java中静态代码块的用法和static用法(转)
(一)java 静态代码块 静态方法区别 一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程 ...
- c# 序列化接口(转载贴)
http://www.cnblogs.com/TianFang/p/3724449.html
- 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 ...
- prince2的市场使用规模有多大?
PRINCE2的使用和应用非常广泛.在过去的12个月里,超过60,000人参加了PRINCE2基础资格(Foundation)或从业资格(Practitioner)考试.现在每周参加考试的人数超过了2 ...
- MyBatis基本配置和实践(一)
第一步:创建Java工程和数据库表user 第二步:使用Maven管理项目依赖 第三步:在resources目录下加入log4j.properties 第四步:在resources目录下加入SqlMa ...
- hbase shell基础和常用命令详解
HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...
- EF学习之CodeFirst(二)--数据迁移
使用CodeFirst时,如果Model发生改变的话,例如我们给User类里面新加个Sex属性,运行时会出现如下错误: 这时我们需要使用数据迁移来将model的改变同步更新到数据库中. 1.启用数据迁 ...
- 《C++ Primer Plus》读书笔记之五—函数-C++的编程模块
函数-C++的编程模块 1.C++对于返回值的类型有一定的限制:不能是数组,但可以是其他任何类型——整数.浮点数.指针,甚至可以是结构和对象(有趣的是,虽然C++函数不能直接返回数组,但可以将数组 ...