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

如何强制肖像图像具有与风景图像相同的尺寸，并且能够响应？如何强制肖像图像具有与横向图像相同的尺寸并且具有响应性？

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

`<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>`

来源

2017-09-01 runaverse

您可以从创建具有边框的空白div开始，并使其按照您希望使用CSS的方式行事。当它工作时，您将图像添加为div的背景图像，并将其设置为“覆盖”。这样，各种图像（横向或纵向）将完美填满div。当然，一些边界可能会被切断。 – Kokodoko

你会建议在使用img类和使用这样的CSS？ .bake-img max-height：273px; 溢出：隐藏; margin：20px 0 20px 0; } .bake-img-2 {margin_top：-100px; } – runaverse

@kokodoko您如何知道如何制作边框尺寸？我无法弄清楚我的风景图片的尺寸是多少，因为它的响应速度很快，尺寸不断变化：（ – runaverse

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

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>

我recomned你看一些introduction what bootsrap is使用这个库。

来源

2017-09-01 15:05:17 Universus

嗨，我真的在使用Bootstrap，它是响应式的，但不是我希望的响应方式 – runaverse

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

回答

相关问题