在 div 中安装 img [重复]答案

【问题标题】：Fitting img inside div [duplicate]在 div 中安装 img [重复]
【发布时间】：2016-09-09 13:38:54
【问题描述】：

我有一个 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

【问题讨论】：

你为什么在 '.small:after' 中使用 padding-bottom: 100%？
你的意思是这样 - jsfiddle.net/ddbpd98c/2
@fdey 所以 div 每次都会保持盒子形状。

标签： css

【解决方案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>

【讨论】：

背景图像工作正常，但如果我想要更多具有不同图像的 div 怎么办？那只是铁道部课程。有没有办法在里面使用img？这也适用于其他元素，以防我不想只添加图像。
@trolkura 再次通读。我给出了三个解决方案。如果您只想在 div 中使用 img，请使用第三个（定义图像高度）。

【解决方案2】：

这是因为父元素，因此 div.small 没有明确设置其高度。

对于元素height 默认为auto，这意味着每个元素的高度都等于其内容。元素的内容决定了它的高度。

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

试试这个：

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

检查小提琴here。

更新

另外，请通过lynda.com 检查此tutorial，因为它提供了有关元素高度的说明。有点旧，但很好的东西。

【讨论】：