Question

我有一个具有固定高度的div和一个可以包含不同数量文本的内容区域。我需要更改图片的高度（可以裁剪图片），以便所有内容都填充div的固定高度。

Answer 1

<h2>Galeria: {{gallery.title}}
    <p><small>{{gallery.dateCreated | polishDate | uppercase}}</small></p>
    <br><small>galleryId: {{gallery.galleryId}}</small>
    <p>des: {{gallery.description}}</p>
    <img src="{{gallery.thumbUrl}}">

div.container {
  position: relative;
  height: 500px;
  background: red;
  background-image: url('/assets/img/cookie.jpg');
}

div.container>textarea {
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0px;
  height: 200px;
}

https://codepen.io/anon/pen/xBGNeX

Answer 2

您可以为此使用网格（我昨天刚在工作中做过哈哈），类似：

div {
  display: grid;
  height: 400px;
  grid-template-rows: auto min-content;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div>
  <img />
  <p>....</p>
</div>

https://codepen.io/anon/pen/gEpJZZ

您也可以使用flex：

div {
  display: flex;
  max-height: 400px;
  flex-direction: column;
}

Answer 3

您可以尝试使用flexbox。 Flexbox允许您设置哪些元素将比其他元素具有更多的位置。

.parent {
  display: flex;
}

.child {
  background: green;
  width: 20%;
}

.child:nth-child(1) {
  background: yellow;
  flex: 1;
}

<div class="parent">
  <div class="child">gwert sdg sdg qwe gw asdasda sd asd a`sd asd asd asdf asdf asdf ar gwert sdg sdg qwe gw asdasda sd asd a`sd asd asd asdf asdf asdf a gwert sdg sdg qwe gw asdasda sd asd a`sd asd asd asdf asdf asdf a</div>
  <div class="child"><img src="https://www.w3schools.com/w3css/img_snowtops.jpg" /></div>
</div>

如何使图像的高度取决于div中的其他内容？

3 个答案: