Question

我有一个非常具体的非包装div设置，这些div水平对齐并在屏幕外流动。想象一下一排长长的div在屏幕外流动。

（后来计划使用JavaScript来实现一些滚动功能，以将屏幕外的部分滚动回到屏幕上。）

在每个div中，我在顶部都有一些文本，在底部有一个图像。在上面的文字中，我不知道确切的高度。但是，底部的图像应填充每个div中剩余的垂直空间。同时应保持原始图像的宽高比，并且图像的宽度应确定包含div的宽度。

为澄清起见，应不要裁剪图像，并以任何方式挤压或拉伸不要。应当以某种方式缩放/显示它们，以填充div中剩余的垂直空间。

好吧，我不明白这一点。

这是我目前拥有的：

<div id="wrapper">
  <div id="slider">

    <div class="slide">
      <p>Some text</p>
      <img src="http://placekitten.com/200/300">
    </div>

    <div class="slide">
      <p>Some text</p>
      <img src="http://placekitten.com/600/500">
    </div>

    <div class="slide">
      <p>Some text</p>
      <img src="http://placekitten.com/600/200">
    </div>

  </div>
</div>

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  height: 100%;
  white-space: nowrap;
  position: absolute;
  font-size: 0;
  background-color: lightgreen;
}

.slide {
  height: 100%;
  display: inline-block;
  margin-right: 15px;
  background-color: pink;
}

p {
  font-size: 16px;
  padding-bottom: 10px;
}

img {
  height: 100%;
}

这显然不起作用，因为在图像上使用100％的高度会使容器变大，滚动条出现在每个div中不应出现的位置。我尝试在图片上使用flex-grow: 1;的flexbox，但这会使它变形，特别是如果我在上面的文本中添加一些填充。

这是jsfiddle演示的问题。

我该如何解决？

（如果这是相关的：我们可以假定图像上方的文本永远不会比图像宽（因为它只会是数字）。

Answer 1

修改

要获得不同字体大小的完美长宽比，可以使用em而不是px。在此jsfiddle https://jsfiddle.net/ormhukax/中，我将行高设置为1.2，并在CSS calc中使用了1.2em。

最终CSS：

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  height: 100%;
  font-size: 0;
  background-color: lightgreen;
  flex-wrap: nowrap;
  display: flex;
}

.slide {
  font-size: 48px;
  line-height: 1.2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 15px;
  background-color: pink;
  overflow: initial;
}

p {
  padding-bottom: 10px;
}

img {
  flex: 1;
  height: calc(100% - 1.2em - 10px);
}

看看这个小提琴： https://jsfiddle.net/4nw03vrd/2/

这是我使用的CSS：

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 328px;
  position: relative;
}

#slider {
  height: 100%;
  font-size: 0;
  background-color: lightgreen;
  flex-wrap: nowrap;
  display: flex;
}

.slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 15px;
  background-color: pink;
  overflow: initial;
}

p {
  font-size: 16px;
  padding-bottom: 10px;
}

img {
  flex: 1;
  height: calc(100% - 28px);
}

需要calc（）来补偿宽高比的较小失真，如果图像的尺寸大于文本高度，则可以忽略不计，并且基本上是字体大小+底部填充

Answer 2

这是一个不需要在图像高度上使用calc（）的选项。

我将图像包装在div中，以确保flex不会扭曲其纵横比。段落的垂直对齐方式可以通过“ align-self”属性来控制。

JS Fiddle示例： https://jsfiddle.net/byronj/r42dx90g/31/

* {
  margin: 0;
  box-sizing: border-box;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  align-items: stretch;
  display: flex;
  font-size: 0;
  background-color: lightgreen;
}

.slide {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  margin-right: 15px;
  background-color: pink;
}

.slide div {
  flex-basis: 100%;
  align-self: flex-end;
}


p {
  align-self: flex-end;
  flex-basis: 100%;
  font-size: 16px;
  padding-bottom: 10px;
}

<div id="wrapper">
  <div id="slider">

    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat tristique pharetra. Nullam mollis et metus sit amet dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet egestas mauris. </p>
      <div>
        <img src="http://placekitten.com/200/300">
      </div>
    </div>

    <div class="slide">
      <p>laoreet nec urna. Donec nisl lectus, varius in aliquet eget, dapibus sit amet nibh. Maecenas blandit ipsum eros, a convallis magna varius a.</p>
      <div>
        <img src="http://placekitten.com/600/300">
      </div>
    </div>

    <div class="slide">
      <p>Some text</p>
      <div>
        <img src="http://placekitten.com/200/300">
      </div>
    </div>

  </div>
</div>

Answer 3

不确定我是否完全了解您要实现的目标，也许草图可以提供帮助。

但是，如果我感到满意，请尝试使用background-image而不是img标签。

这里正在摆弄小提琴https://jsfiddle.net/umf9eh03/

<div id="wrapper">
    <div id="slider">
        <div class="slide">
            <p>Some text and longer text as it goes and yet it is even longer</p>
            <div class="img-wrapper" style="background-image: url('http://placekitten.com/200/300')"></div>
        </div>

        <div class="slide">
            <p>Some text</p>
            <div class="img-wrapper" style="background-image: url('http://placekitten.com/600/500')"></div>
        </div>

        <div class="slide">
            <p>Some text</p>
            <div class="img-wrapper" style="background-image: url('http://placekitten.com/600/200')"></div>
        </div>
    </div>
</div>

<style>
    * {
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #wrapper {
        height: 300px;
        position: relative;
    }

    #slider {
        height: 100%;
        white-space: nowrap;
        position: absolute;
        font-size: 0;
        background-color: lightgreen;
    }

    .slide {
        height: 100%;
        display: inline-block;
        margin-right: 15px;
        background-color: pink;
        overflow: hidden;
    }

    .slide .img-wrapper {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    .slide p {
        font-size: 16px;
        padding-bottom: 10px;
    }
</style>

Answer 4

我了解您的问题。

添加以下CSS，看看是否可行：）

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  height: 100%;
  white-space: nowrap;
  position: absolute;
  font-size: 0;
  background-color: lightgreen;
}

.slide {
  height: 100%;
  display: inline-block;
  margin-right: 15px;
  background-color: pink;
}

p {
  font-size: 16px;
  height:10%;
  padding:5px;
}

img {
  height: 90%;
}

Answer 5

here是一个工作的小提琴。 .slide 元素之间的边距可以修改。尝试使用 img 的 padding-top 属性值。您可以查看here如何使图像缩放以适合分配的区域。我使用CSS Flexbox布局 .slider 和 .slide 。

这是我的最终代码：

* {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  display:flex;
  flex-direction: row;
  height: 100%;
  position: absolute;
  font-size: 0;
  background-color: lightgreen;
  overflow: hidden;
}

.slide {
  display: flex;
  width: auto;
  /* border: 1px solid blue; */
  flex-direction: column;
  justify-content: space-between;
  /*height: 100%;   */
  /* margin: auto;*/
  text-align: center;
  background-color: pink;
  overflow: hidden;
}

..

img {
  padding-top: 5%; 
  object-fit: contain; /* also try `contain` and `fill` */  
  height: auto;
  max-width: 100%;
}

在继承图片宽度的同时，用图片填充容器的剩余垂直空间

5 个答案: