缩放图像以适合卡片且不与标题重叠

Question

我有一些卡片，下面有一张图片和一个标题，图片和标题的大小会随着卡片的大小而调整，而卡片的大小会随着屏幕尺寸的变化而调整。在较小的屏幕或较长的标题上，我会遇到图像覆盖文本的问题。

我希望图像缩放以适合卡片，但当它达到卡片的宽度或文本的顶部时停止。（所有图像都是完美的正方形，因此 img 宽度和高度应始终相等）

下面是一些结果截图，左边是我不想发生的两件事，右边是可以接受的事情。

link to image examples of cards

由于完整的代码有点长，这里有一个 JSFiddle，其中包含一个工作示例，说明现在的情况（卡片采用 bootstrap 样式 rows/columns）。 http://jsfiddle.net/js47withfeeling/dtbx78ay/4/

下面是一些相关的代码片段。

HTML一张卡

    <div class="card-column card">
        <img class="card-img" src="Link to Image">
        <p class="card-title">With Security</p>
    </div>

在这个 HTML 块中有一堆这样的卡片，它应用了一些 bootstrap

<div class="row">
    <div id="loadCardsHere" class="col-md-9 12u(mobile)">
        <!--cards go here -->
    </div>
</div>

相关CSS

body{
    font-family: 'Old Standard TT', serif;
}
.card{
    margin-top:5px;
    margin-right:5px;
}
.card-img{
    width:100%;
    max-height:500;
}

.card-title{
    position:absolute;
    bottom:0;
    align-self: center;
    font-size:180%;
}
.card-column{
    float: left;
    width: 32%;
    height:300;
    cursor: pointer;
    border-color: #01ABAA;
    border-width: medium;
}
@media screen and (max-width: 600px) {
    .card-column {
      width: 100%;
    }
  }
@media (min-width: 768px) {
    .card{
        max-width:33%;
        max-height:auto;
    }
}

是否有某种 CSS 属性，例如“max-height: (parent.height) - (parent.2ndChild.height) ”？（该语法显然是错误的，但大致如此）

Answer 1

从 .card-title 中删除 position:absolute; bottom:0;。 Absolute 将它从流中移除，并且它没有关于其他 divs/elements.

高度的上下文

Answer 2

Popshuvit 是正确的。此外， align-self 是一个 flex 属性但是没有 flex-parent 来提供这个上下文。不过，您应该采用 flex 路线。我没有测试过，但你想要的结果可能是这样的：

.card {
  position: relative;
  display: flex;
  flex-flow: column;
  text-align: center;
  align-items: center;
  width: 100%;
}
.card-img {
  width: 100%;
  object-fit: contain;
}
.card-title {
  ...text styles
}

此外，您似乎为 .card 和 .card-column 使用了不同的样式，但实际上它们是同一元素。这只有在某些 'cards' 不包含 .card-column class 时才有意义。继续沿着 flex 路线走也能让你摆脱那些讨厌的花车！

缩放图像以适合卡片且不与标题重叠

Scale Image to fit card and not overlap title

html

css

image-resizing

overlapping

responsive-design