如何將圖像顯示爲正方形？

我一直在玩bootstrap 4 alpha版本最近創建一個項目，經過很多嘗試後，我不能讓上傳的不同大小的圖像顯示爲正方形，當我展示它們時。如何將圖像顯示爲正方形？

還記得Instagram只顯示縮略圖的方形圖像嗎？我想實現這一點。我做了一些研究，並嘗試了一堆其他人寫下來的東西，但那個差點不夠，這是這一個唯一： https://stackoverflow.com/a/23518465/1067213

但結果是不是我真正想要做的：

正如您所看到的圖像不是正方形，並且第一個下面有一個間隙，以便它與另外兩個列對齊（我希望所有列都是相同的寬度和高度）。

我使用Django來創建圖像文件的URL。

這裏是我的html：

<div class="row"> 
    {% if competition_list %} 
    {% for competition in competition_list %} 

     <div class="col-md-4"> 
      <div class="card"> 
      <div class="image"> 
      <img class="card-image-top img-fluid" src="/{{competition.image.url}}" > 
      </div> 
      <div class="card-block"> 
       <h4 class="card-title">{{competition.name}}</h4> 
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
       <p><a class="btn btn-secondary" href="https://v4-alpha.getbootstrap.com/examples/jumbotron/#" role="button">View details »</a></p> 
      </div> 
      </div> 
     </div> 

    {% endfor %} 
    {% else %} 
    <p>No competitions in this category, please try an other category</p> 
    {% endif %} 
    </div>

這裏是我的CSS：

.card { 
    margin-bottom: 10px; 
} 

.image{ 
    position:relative; 
    overflow:hidden; 
    padding-bottom:100%; 
} 
.image img{ 
    position:absolute; 
}

理想的結果看起來有點像這樣：

讓我知道你是否需要更多的信息。

在此先感謝！

來源

2017-03-08 Tony Kyriakidis

這真的和Django或Bootstrap無關。您需要將圖像設置爲.image上的背景，以便將它們裁剪爲正方形。

<div class="image" style="background-image: url(/{{competition.image.url}});" ></div>

還要確保您有CSS應用，以填補與背景圖像元素：

.card .image { 
    background-size: cover; 
}

您也可以嘗試迫使圖像拉伸至.image高度的100％和隱藏水平溢出，但背景方法更簡單。

來源

2017-03-08 20:27:10 isherwood

只是增加你在這裏提供的服務將不會顯示任何內容的CSS。但與CSS我已經它實際上工作。我確實有一個問題。這個作物到了中心嗎？ –

要使圖像居中，請使用：background-position：center center;' – isherwood

非常感謝！這簡單而直接！ –

您可以使用一個包裝，並與寬度，最大寬度和最小高度發揮：

<div class="image-wrapper"> 
    <img src="http://placehold.it/350x300"> 
</div> 

<div class="image-wrapper"> 
    <img src="http://placehold.it/500x350"> 
</div> 

<div class="image-wrapper"> 
    <img src="http://placehold.it/300x500"> 
</div>

您將寬度設置爲100％，這將縮放高度。

.image-wrapper { 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
    background: rgba(0, 0, 0, 0.5); 
    margin: 10px 0; 
} 
.image-wrapper img { 
    width: 100%; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
}

添加頂部，左側和變換，使圖像垂直居中。

您還可以使用背景大小：封面和播放背景位置。

<div class="use-cover-background square" style="background-image: url(http://placehold.it/350x300)"></div> 

<div class="use-cover-background square" style="background-image: url(http://placehold.it/500x300)"></div> 

<div class="use-cover-background square" style="background-image: url(http://placehold.it/300x500)"></div>

// CSS

.use-cover-background { 
    background-size: cover; 
    background-position: center; 
} 
.square { 
    margin: 10px 0; 
    width: 300px; 
    height: 300px; 
}

看到他們的工作：https://jsfiddle.net/mcgnyfw9/

問候，

來源

2017-03-08 20:47:38 cnexans

如何將圖像顯示爲正方形？

回答

相關問題