Question

＆＃13;

$("#player1Choice").append("<img src='http://via.placeholder.com/243x166' class='rpsImage'>");
$("#player2Choice").append("<img src='http://via.placeholder.com/243x166' class='rpsImage'>");

＆＃13;

#player1Card, #player2Card, #resultsCard {
    max-width: 250px;
    max-height: 250px;
    width: 58%;
    background-color: #140B7B;
    color: #FFFFFF;
}

.userName {
    font-weight: bold;
    height: 45px;
}

#p1Display, #p2Display {
    height: 170px;
}

#p1WL, #p2WL {
    background-color: #140B7B;
    color: #FFFFFF;
    height: 30px;
    margin-bottom: 0;
}

.rpsImage {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 576px) and (max-width: 767px) {

    #player, #status {
        height: 80px;
    }
    
    #player1Card, #player2Card, #resultsCard {
        max-height: 166px;
    }

    #p1WL, #p2WL {
        font-size: 0.5rem;
        height: 20px;
    }

    .userName {
        font-size: 0.85rem;
        height: 36px;
    }
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-4 d-flex justify-content-center">
    <div class="card text-center mt-1 mb-2" id="player1Card">
      <div class="card-header p-0">
        <h5 class="card-header userName" id="player1">Player 1</h5>
      </div>
      <div class="card-body p-0" id="p1Display">
        <div id="player1Choice"></div>
      </div>
      <div class="card-footer p-0">
        <p class="w-100" id="p1WL"></p>
      </div>
    </div>
  </div>
  <div class="col-sm-4 d-flex justify-content-center">
    <div class="card align-items-center justify-content-center mt-1 mb-2" id="resultsCard"></div>
  </div>
  <div class="col-sm-4 d-flex justify-content-center">
    <div class="card text-center mt-1 mb-2" id="player2Card">
      <div class="card-header p-0">
        <h5 class="card-header userName" id="player2">Player 2</h5>
      </div>
      <div class="card-body p-0" id="p2Display">
        <div id="player2Choice"></div>
      </div>
      <div class="card-footer p-0">
        <p class="w-100" id="p2WL"></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何使卡片主体具有固定的高度而没有内容，但能够响应我在程序中的特定点使用jQuery添加的固定宽高比图像。对于992px及更大的屏幕，我的显卡为250px×250px。图像大小为243px x 166px，我使用以下CSS来缩放它：

.myImage {
    width: 100%;
    height: auto;
}

但是，当我更改平板电脑的视口大小时，高度保持在250px而不是缩小到内容的大小，因为我使用了＆＃34; max-height：250px;＆＃34;在空的时候防止身体塌陷。

除了使用针对特定断点的@media查询之外，还有其他方法可以将卡片高度保持在250px，而卡体没有内容但是它对固定宽高比图像的高度有响应吗？

以下是jsFiddle

用于固定宽高比图像的Bootstrap 4响应卡高度

0 个答案: