CSS图文列表中图片以正方形显示
来源:互联网 发布:淘宝店技巧 编辑:程序博客网 时间:2024/06/05 18:33
<style type="text/css">.figure-list{ margin: 0; padding: 0;}.figure-list:after{ content: ""; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden;}.figure-list li{ list-style: none; float: left; width: 23.5%; margin: 0 2% 2% 0;}.figure-list figure{ position: relative; width: 100%; height: 0; overflow: hidden; margin: 0; padding-bottom: 100%; /* 关键就在这里 */ background-position: center; background-repeat: no-repeat; background-size: cover;}.figure-list figure a{ display: block; position: absolute; width: 100%; top: 0; bottom: 0;}</style><ul class="figure-list"> <li> <figure style="background-image:url(http://1.su.bdimg.com/skin/19.jpg)"> <a href="#"></a> </figure> </li> <li> <figure style="background-image:url(http://5.su.bdimg.com/skin/3.jpg)"> <a href="#"></a> </figure> </li></ul>
从例子里发现元素的 padding
的百分比数值是根据当前元素的宽度来计算的,于是可以利用这个特性来做一些特殊布局。正方形只是矩形的特殊形式,所以需要一定宽高比例的矩形也可以用这个方法。
0 0
- CSS图文列表中图片以正方形显示
- css 正方形图片显示为圆形
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- 正方形图片变圆形css
- CSS——实现图片等比例正方形显示,宫格排列
- php网页显示正方形图片缩略图
- 用背景显示图片正方形布局
- android--列表中显示资源中的图片
- Android中GridView 如何正方形显示图片并适配手机
- 图文混编效果之TextView、EditText中显示图片
- 用DIV+CSS实现图文混排与文字列表一起显示
- css中background url不显示图片
- CSS 图片列表,横向
- CSS图片列表
- CSS中span内容超出部分以...显示
- CSS中以图片为背景的文本例子
- 商品列表以树形显示
- GridView显示图片(图文)
- *LeetCode-Binary Tree Maximum Path Sum
- Unity报错:Collection was modified; enumeration operation may not execute
- 【cpp】【函数】
- 黑马程序员——Java基础加强---反射
- 特权FPGA学习-笔记11-testbench学习(1)
- CSS图文列表中图片以正方形显示
- 2015书单 - 《异类》
- 10.9JAVA学习
- 黑马程序员——集合框架(四)
- Linux下使用dosemu写汇编
- java.util.logging自定义打印日志
- 在sublime中添加rainmeter插件
- 黑马程序员——C语言学习笔记01 一部分容易忽视的概念
- JavaScript事件对象