Question

我想将卡片中的图像固定在卡片主体的顶部。我试过bottom：0，但不起作用。我希望卡主体的高度固定并固定在底部（正在工作）。但我希望将图像固定在顶部，因为它们的大小不同并且缩放比例也不同。请有人帮忙。

<div class="card" style="width: 18rem;">

            <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
        <div class="card-body">
                <h5 class="card-title">Suit</h5>
                 <p class="card-text">Professional, business executive look.</p>
                 <p class="text-center">€299</p>
                <a href="#" class="btn btn-success btn-block">Add to cart</a>

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  height: 650px;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
  bottom: 0;
  position: absolute;
}

<div class="card" style="width: 18rem;">

  				<img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
  			<div class="card-body">
    				<h5 class="card-title">Suit</h5>
   					 <p class="card-text">Professional, business executive look.</p>
   					 <p class="text-center">€299</p>
    				<a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

Answer 1

将position:absolute用于卡身

.card-body{
    position:absolute;
    bottom:0;
 }

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  height: 650px;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body{
position:absolute;
bottom:0;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="card" style="width: 18rem;">

  				<img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
  			<div class="card-body">
    				<h5 class="card-title">Suit</h5>
   					 <p class="card-text">Professional, business executive look.</p>
   					 <p class="text-center">€299</p>
    				<a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

Answer 2

您需要使用flexbox

<div class="card">
    <div class="wrapper-image">
        <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
    </div>
    <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

.wrapper-image {
    height: 18rem;
    display: flex;
    align-items: flex-start;
}

在这种情况下，包装器imagem将具有18rem height，它比image大，因此align itens属性会将imagem放在开始div（顶部）上，您也可以使用center和{{ 1}}代替flex-end，display flex允许您使用flex-start和align-items属性（这使您可以水平放置图像） justify-content对于将所有内容放在同一行中的标签中也很有用，因此，如果在te wrapper-image内放置两个图像，它们将并排显示，为更正它，您可以使用display flex 如果没有您可以了解有关flexbox here的更多信息如果这没有用，最好显示您的代码，如果可能的话，将其放在代码笔中，这样我可以更有用

卡图像对齐

2 个答案: