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：在图像上包含CSS属性，以便在重新调整大小时使用div进行缩放。

与div一起调整图像大小

2 个答案: