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

问题描述 投票:0回答:3

我有一个固定高度的div和一个可以有不同文本量的内容区域。我需要图像来改变它的高度(图像可以被裁剪),以便所有东西都填充div的固定高度。

Examples

html css
3个回答
1
投票

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;
}
<html>

<body>
  <div class="container">
    <textarea>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit rutrum finibus. Quisque tincidunt laoreet justo eget posuere. Quisque gravida imperdiet elit, ac volutpat tortor tempor placerat. Sed aliquam, metus ac vulputate varius, arcu diam pulvinar tortor, vel congue massa odio sed sem. Fusce auctor neque non nisl lobortis, nec vehicula nulla malesuada. Vestibulum pellentesque odio tempus, tincidunt augue hendrerit, venenatis libero. Pellentesque convallis luctus rutrum. Nunc vel mauris sit amet nibh laoreet hendrerit vitae vel tellus. Phasellus gravida dui ac venenatis aliquet.

      Proin pulvinar pellentesque lorem, a imperdiet massa pulvinar eget. Quisque vitae est lorem. Maecenas porttitor quis dui sit amet ultricies. Phasellus accumsan, augue ac ornare tincidunt, eros diam sollicitudin enim, id vehicula quam justo quis leo. Aliquam at turpis est. Praesent rutrum felis eget justo suscipit finibus et nec enim. Quisque sed eleifend velit, eget fringilla purus. Nunc imperdiet metus luctus laoreet porttitor.
    </textarea>
  </div>
</body>

</html>

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


1
投票

你可以使用一个网格(我昨天刚刚在工作中做了哈哈),类似于:

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;
}

0
投票

您可以尝试使用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>
© www.soinside.com 2019 - 2024. All rights reserved.