动态大小的图像和标题框？

Question

我正在寻找制作下图所示的最佳实践方法。我希望标题框占用尽可能少的空间，图像占用所有可用空间。容器可以设置高度和宽度，但如果可能是动态的，我更喜欢它。

我希望只用HTML和CSS来做这件事。

<div id="exampleBox">
   <img>
   <span></span>
</div>

谢谢。

Answer 1

如果exampleBox有一个设定的高度，你可以试试这个。

简单地从exampleBox高度减去标题的高度。

然后使用此值设置图像的高度。

var exampleBoxHeight = document.getElementById('exampleBox').clientHeight;
var captionHeight = document.getElementById('caption').clientHeight;

var imgHeight = (exampleBoxHeight - captionHeight);
var boxImg = document.getElementById('boxImg').height = imgHeight;

#exampleBox {
  position: relative;
  height: 250px;
  width: 350px;
  border: 1px solid;
}

#exampleBox img {
  max-width: 100%;
}

#exampleBox span {
  position: absolute;
  bottom: 0;
  padding: 16px;
  text-align: center;
  background: green;
}

<div id="exampleBox">
   <img id="boxImg" src="http://placehold.it/350x150">
   <span id="caption">Lorem ipsum dolor sit modo ligula eget dolor.</span>
</div>

以下是您可以玩的代码链接：Codepen Links

Answer 2

创建一个比率（宽度/高度= 2/1）的Figure，将所有子项设置为position: absolute，img height: 100%用于框拟合; 此外，您可以添加任何比率。但它取决于Figure的宽度，因此它将被声明。

/* start boilerplate */
*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
/* end boilerplate */


.Figure {
  overflow: hidden;
  position: relative;
  width: 40vw; /* Just for demo, you should declare any width */
  margin: 10px;
}
.Figure:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 50%; /* Ratiobox hack: width / height === 2 / 1 */
}

.Figure__img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}

.Figure__cover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.Figure__cover--top_bottom {
  background-position: 0% 100%;
}
.Figure__cover--bottom_top {
  background-position: 100% 0%;
}

.Figure__caption {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,.2);
  color: #fff;
  padding: 10px;
  text-align: center;
  max-height: 100%;
  overflow: auto;
}

<!-- with img -->
<figure class="Figure">
  <img class="Figure__img" src="http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg">
  <figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nemo consectetur, fuga laborum officiis ea impedit reprehenderit iste autem blanditiis nostrum</figcaption>
</figure>
<figure class="Figure">
  <img class="Figure__img" src="http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg">
  <figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </figcaption>
</figure>
<!-- /with img -->

<!-- with background-image -->
<figure class="Figure">
  <div class="Figure__cover Figure__cover--bottom_top" style="background-image: url(http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg)"></div>
  <figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </figcaption>
</figure>
<figure class="Figure">
  <div class="Figure__cover Figure__cover--top_bottom" style="background-image: url(http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg)"></div>
  <figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nemo consectetur, fuga laborum officiis ea impedit reprehenderit iste autem blanditiis nostrum</figcaption>
</figure>
<!-- with /background-image -->