HTML和CSS處理不同形狀的圖像

由於你們中的一些人可能知道允許用戶上傳圖像可能是一件麻煩事，尤其是如果你必須創建某種列表與他們。HTML和CSS處理不同形狀的圖像

我一直在尋找所有的網絡，並一直無法找到具體的答案，你在做什麼的情況下，你需要顯示不同形狀的圖像列表。爲此我轉向你。

說用戶1上傳下面的圖片：

而且用戶2個上傳這個圖片：

正如你可以看到這兩個圖像是非常高度和寬度都不相同。

現在讓我們說，你有不同大小的10張圖像，並希望在網格4×4顯示它們（爲此我使用ng-repeat顯示一個循環）

<div class="col-xs-4" ng-repeat="image in images"> 
    <img alt="" ng-src="{{image}}"> 
</div>

如果你這樣做，這將創建一個不均勻的列表！至少可以說看起來很「醜陋」。

所以我的問題是你是做什麼的？是否有任何使用CSS的技巧使它適合任何尺寸的任何圖像，以便一切都對齊？

我希望我的問題描述足夠準確，以便演示，這裏也是一個演示此問題的小提琴。

總之，我如何確保它們都是相同的大小，而不會使圖像看起來侷促和/或扭曲個別圖像？

fiddle

來源

2016-12-18 Marc Rasmussen

如果他們是不同的長寬比，你想要均勻地顯示他們，你將不得不...... a）裁剪他們 - 也許一個居中正方形最適合這個，或者b）把他們放在一個容器周圍有空間。哪個選項更適合你？ – sol

這並不能解決裁剪的問題，但bootstrap有'clearfix'類來幫助解決這個問題。在每個第三個元素中添加一個clearfix元素將會打入一個新行：http://jsfiddle.net/jn6nnp3d/1/ – bitten

正如我在評論中提及，一個選擇是裁剪所有圖片到合適的格式，方可能是一個很好的妥協。您可以通過首先將圖像包裝在容器中，然後將圖像與容器相關放置來完成此操作。例如：

/* Latest compiled and minified CSS included as External Resource*/ 
 

 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
} 
 

 
.image-container { 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    padding: 20px; 
 
} 
 

 
.image-container img { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    margin: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-4"> 
 
     <div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="image-container"> 
 

 
     <img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div> 
 
    </div> 
 

 
    <div class="col-xs-4"> 
 
     <div class="image-container"> 
 
     <img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="image-container"> 
 
     <img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div> 
 
    </div> 
 
    </div> 
 
</div>

Fiddle

還可以在容器中定位圖像。例如，如果你想中心，它可以添加：

top: -100%; 
    bottom: -100%; 
    left: -100%; 
    right: -100%;

來源

2016-12-18 21:50:44 sol

一種解決方案是提供了跟頭的用戶首選率，並允許他們選擇來顯示圖像的一部分。

另一種方法是使用圖像作爲具有特定比例的div的背景，並希望它不顯示不相關的區域。

下面是第二種情況的解決方案（了 - 只是爲了笑 - 動畫顯示的圖像全）

http://jsfiddle.net/mrccf3sv/

.image{ 
    display:block; 
    background: url('') 50% 0% no-repeat; 
    background-size:cover; 
    border:1px solid #ccc; 
    animation:pan 10s linear infinite alternate; 
    } 
.image:before{ 
    content:''; 
    display:block; 
    padding-top:56.25%; /*ratio of 16:9*/ 
}

，看看它響應通過爲每個斷點使用不同的引導程序列數。
http://jsfiddle.net/mrccf3sv/1

來源

2016-12-18 21:51:00

使用CSS進行縮放是非常糟糕的做法。我的意思是，我們都必須這樣做，但如果您可以擴展服務器端，那麼最好做到這一點。如果可用的話，試試PHP的imagick。

來源

2016-12-18 22:27:35

HTML和CSS處理不同形狀的圖像

回答

相關問題