Question

在开发工具移动视图中，当我在卡片顶部的图像周围添加填充时，该图像不会保持宽高比。回到全尺寸视图时，长宽比就可以了。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-deck">
  <div class="card bg-primary product-card--style mb-3">
    <img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
    <div class="card-body product-card--layout">
      <h5 class="card-title">Product 1</h5>
      <h6 class="card-subtitle">For people who..</h6>
      <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
      <a href="#" class="card-link">More info</a>
    </div>
  </div>
</div>

我的code

Image在开发工具移动版中的外观

问题是，如果我进入开发工具移动视图中的代码笔，它似乎可以正常工作，但是从我的文件来看，它不是。这就是我对此感到困惑的原因。

Answer 1

您想保持宽高比，这对您有用吗？

.card { display:block !important; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-deck">
  <div class="card bg-primary product-card--style mb-3">
    <img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
    <div class="card-body product-card--layout">
      <h5 class="card-title">Product 1</h5>
      <h6 class="card-subtitle">For people who..</h6>
      <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
      <a href="#" class="card-link">More info</a>
    </div>
  </div>
</div>

如何在移动显示器上使用卡片图片的填充来保持长宽比？

1 个答案: