css - 随 div 调整图像大小

Question

我无法调整 div 中图像的大小。 div 工作正常，但 div 内的图像保持相同大小。

如何让图片随div变大变小？

div.column {
    display: block;
    position: relative;
    max-width: 800px;
    margin: 0px auto
}

div.fixedratio {
    padding-top: 100%;
    display: block;
    position: relative;
    margin: 0;
    background-color: #eee;
    background-image: url('http://i.imgur.com/4pgtZwz.png');
    background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    border: 1px solid #999;
    background-position: center center;
}

.tengah {
  left: 50%;
  top: 50%;
  position: absolute;
  margin-top: 0px;
  margin-left: 10px;
}


<div class="column">
   <div class="fixedratio">
      <div class="tengah">
           <img src="http://s9.postimg.org/5ocnzd117/icon_player_soccer.png">
      </div>
   </div>
</div>

http://jsfiddle.net/jeffernandes/f05jh0gs/4/

Answer 1

您可以在图像上使用 background-size:contain CSS 属性，使其在调整大小时随 div 一起缩放。