如何强制纵向图像与横向图像具有相同的大小并且具有响应性？
我试图用图像 here 来做这件事bake-img 的 div 类和 back-img-2 的 img 类。我成功地做到了这一点，但它没有响应。有什么建议么？
`<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>`
最佳答案
我知道您已经实现了您想要的，但页面没有响应。
Example你提到的是响应式的，因为它有指向外部 CCS 库的链接 Bootstrap .如果你 google 一下，你会发现它是 CCS 最流行和使用最多的框架库之一。
您可以通过将以下代码插入您的 head 标签来简单地使用这个库
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
然后跟随你的 body 标签
<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 .
关于html - 如何强制肖像图像与风景图像具有相同的大小并具有响应性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46002699/