html - 使图像适合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 中看到的问题是不适合(拉伸(stretch)和调整大小)到 .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 更改不是强制性的，您也可以通过其他方式进行更改，但这对我来说似乎是最干净的。诀窍基本上是强制图像始终占据整个空间并使用 float 对齐元素。

编辑:

jsfiddle - variant 1

jsfiddle - variant 2