如何強制肖像圖像具有與橫向圖像相同的尺寸並且具有響應性？

如何強制肖像圖像具有與風景圖像相同的尺寸，並且能夠響應？如何強制肖像圖像具有與橫向圖像相同的尺寸並且具有響應性？

我正在嘗試使用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

如何強制肖像圖像具有與橫向圖像相同的尺寸並且具有響應性？

回答

相關問題