Question

我有一个div

我使用以下方式保持盒子形状：

div{
    float:left;
    width:  447px;
    height:     445px;
    background-color: blue;
}


div:after{
   content: "";
   display: block;
   padding-bottom:100%
}

当我想要将图像添加到div

时会出现问题

<div><img src="as.jpg"></div>

使用：

img{
  width:100%;
  height:100%;
}

这两件事之一是什么：

图片未涵盖整个div
图片未覆盖整个div并且盒子形状被破坏

有办法解决这个问题吗？ Demo

Answer 1

使用图片作为背景图片。

示例：

div {
  display: block;
  width: 500px;
  height:500px;
  background: url('http://www.nasa.gov/sites/default/files/images/729223main_728322main_messenger_orbit_image20130218_2_full_full_full.jpg') no-repeat;
  background-size: contain;
}

<div>
</div>

如果您想使用bootstrap framework ，则更简单。

示例（使用Bootstrap）：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-3">
    <img src="http://images.all-free-download.com/images/wallpapers_large/love_wallpaper_vector_3d_wallpaper_261.jpg" class="img-responsive" style="padding-top: 5px">
  </div>
</div>

您也可以按常规方式进行操作，只需设置图像的高度即可。

div中的图像，定义了图像高度：

<div>
  <img src="http://images.all-free-download.com/images/wallpapers_large/love_wallpaper_vector_3d_wallpaper_261.jpg" alt="image" height="200px" />
</div>

Answer 2

这种情况正在发生，因为父元素，因此div.small没有明确设置它的高度。

默认情况下，元素height为auto，表示每个元素的高度等于其内容。元素的内容决定了它的高度。

对于具有height: 100%的元素，因此要使用百分比来适应容器的高度，您应该以绝对值确定父级的高度。

试试这个：

尝试将height:400px;设置为div.small，将height: 100%;设置为图像。然后图像将适合其容器。

检查小提琴here。

<强>更新

此外，请tutorial查看此lynda.com，因为它提供了有关元素高度的说明。有点旧，但非常好。

在im

2 个答案: