Question

如何强制肖像图像与横向图像具有相同的尺寸并且还能响应？

我试图用图像here和div类的bake-img和img类的back-img-2来做这个。我成功地做到了这一点，但它没有响应。有什么建议？

`<div class="col-md-6 ">
  <div class="bake-img">
    <img class="portfolio-img img-fluid bake-img-2" src="http://res.cloudinary.com/ottiya/image/upload/c_scale,w_985/v1504150918/brooke-lark-261287_rbw0mw.jpg" alt="yummy pastries">
  </div>
  <h4 class="portfolio-title">Bake920</h4><p class="portfolio-text">Alcatra kielbasa t-bone tongue, swine turducken boudin pancetta kevin leberkas. Bacon ipsum dolor amet brisket corned beef sirloin tongue ribeye venison. </p>
</div>`

Answer 1

我知道你已经达到了你想要的但没有页面响应。

Example您提到的内容是响应式的，因为它链接到名为Bootstrap的外部CCS库。如果你谷歌它，你会发现它是最受欢迎和使用的CCS框架库之一。

您可以通过在头标记中插入以下代码来使用此库

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

跟随你的身体标签

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

我建议你看一些introduction what bootsrap is。

如何强制纵向图像与横向图像具有相同的大小并做出响应？

1 个答案: