图片的占位问题以及自适应宽高比的解决方案

[fayching]

用padding-top: 图片高度/宽度
实现图片占位以及宽高自适应
进一步实现图片网格
demo看：http://frozenui.github.io/demo/grid.html

.ui-grid-trisect {
  padding-left: 10px;
  padding-right: 3px;
  overflow: hidden; }

.ui-grid-trisect > li {
  width: 33.33333333%;
  padding: 0 7px 10px 0;
  float: left;
  position: relative;
  -webkit-box-sizing: border-box; }

.ui-grid-trisect-img {
  padding-top: 149.47%; }

.ui-grid-trisect h4 {
  font-size: 12px;
  position: relative;
  margin: 7px 0 3px; }

.ui-grid-trisect h4 span {
  display: inline-block;
  margin-left: 12px;
  color: #808080; }
.ui-grid-trisect-img{
  width: 100%;
  position: relative; }
.ui-grid-trisect-img img{
  width: 100%;
  height: 100%; }
.ui-grid-trisect-img:active{
  opacity: .7; }
.ui-grid-trisect-img > span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%; }