Question

我有一些带有图像和标题的卡，它们的图像和标题随卡的大小而改变，卡的大小随屏幕尺寸的变化而改变。在较小的屏幕或较长的标题上，图像覆盖文字时会出现问题。

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

以下是结果的屏幕截图，左侧是我不想发生的两件事，而右侧是可以的事情。

由于完整的代码有点长，所以这里是一个JSFiddle，上面有一个实际的示例（卡片位于引导程序样式的行/列中）。 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块中有很多类似的卡片，它们应用了一些引导程序

<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;。绝对将其从流中删除，并且它与其他div /元素的高度没有关联。

Answer 2

Popshuvit是正确的。同样，align-self是flex属性，但没有flex-parent可以提供此上下文。您应该选择弹性路线。我尚未测试，但是您想要的结果可能看起来像这样：

.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实际上是同一元素时，它们似乎具有不同的样式。仅当某些“卡”不包含.card-column类时，这才有意义。继续沿flex路线行驶，还可以让yuo摆脱那些讨厌的漂浮物！

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

2 个答案: