css控制长方形图片在正方形区域显示,且不变形
2018-01-11 00:00
405 查看
实际图:600px*500px
效果图:
代码:
总结:
主要代码:
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> * { margin: 0px; padding: 0px; } ul, li { list-style-type: none; } .box { width: 1200px; margin: 30px auto; display: table; } .list li { position: relative; float: left; width: 300px; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .list li:before { content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid red; } </style> <body> <div class="box"> <ul class='list'> <li style="background-image: url(timg.jpeg)"></li> <li style="background-image: url(timg.jpeg)"></li> <li style="background-image: url(timg.jpeg)"></li> <li style="background-image: url(timg.jpeg)"></li> </ul> </div> </body> </html>
总结:
主要代码:
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
相关文章推荐
- CSS控制图片显示区域
- CSS控制图片和文字在同一行显示且对齐的3种方法
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- 【CSS】CSS控制DIV背景图片显示位…
- 关于css控制图片大小不变形的实现思路
- CSS 控制单行文本和多行文本的显示区域不够存放时使用省略号...来替代的做法
- 用CSS来控制图片显示的最大宽度
- iOS将长方形的图片截成正方形显示
- \t\t用js控制页面图片等比缩放 css图片等比缩放 比例缩放显示 js 页面 缩放图片 js缩放图片 图片按比例缩放
- CSS控制表格背景图片不重复显示&Discuz板块背景
- Android可以动态控制图片显示区域的自定义ImageView
- css 正方形图片显示为圆形
- 用CSS控制图片大小显示的方法
- CSS控制图片大小不变形
- css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码
- 用CSS控制图片大小显示的方法
- CSS -- 图片宫格不变形显示
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- Div里CSS控制图片按比例扩大缩小不变形
- CSS——实现图片等比例正方形显示,宫格排列