使图像适合 div 而不会丢失 CSS 中的任何内容

Question

我有一个包含两个图像的 div。我希望第二张图片适合 div，因为宽度和高度是动态的。

我的代码如下所示：

.box {
  width: 640px;
  height: 540px;
  float: left;
  overflow: hidden;
}

.img-border {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  margin: 5px;
}

<div class="box" id="target">
  <div align="center">
    <img src="http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width="60%" height="60%">
  </div>
  <img class="img-border" id="imgQues" src="https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
  <div class="comment" id="chatbox">
  </div>
</div>

您在.img-border 看到的问题不适合（拉伸和调整大小）到.box div 并保持其纵横比。

有什么方法可以将第二张图片img-border放入div并保持比例？

Answer 1

尝试以下方法：

.box {
  width: 640px;
  height: 540px;
  float: left;
  overflow: hidden;
  /**
    Just for visualization 
  **/
  background: gray;
}

/**
  Just dummy names, rename as you like
*/
.box__first-child,
.box__second-child {
  float: left;
  width: 49.99999999%;
}

/**
  Force images to always take remaining space
*/
.box img {
  width: 100%;
}

.img-border {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  margin: 5px;
}

<div class="box" id="target">
  <div class="box__first-child" align="center">
    <img src="http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width="60%" height="60%">
  </div>
  <div class="box__second-child">
    <img class="img-border" id="imgQues" src="https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
    <div class="comment" id="chatbox">
    </div>
  </div>
</div>

html 更改不是强制性的，您也可以通过其他方式进行更改，但这对我来说似乎是最干净的。诀窍基本上是强制图像始终占据全部空间并用浮动将项目彼此对齐。

编辑：

jsfiddle - variant 1

jsfiddle - variant 2