调整图像大小以及 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

您需要添加一些 css 来更改图像大小，如下所示：

.tengah img{
 width:50%;
 height:50%;
 }

这会将图像的宽度更改为相对于父容器的大小百分比。

Answer 2

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

调整图像大小以及 div

Resize image along with the div

css

css-position

background-position

image-resizing

responsive-design