自舉：塊圖像調整大小

我使用的YouTube畫面下方的一個例如：自舉：塊圖像調整大小

enter image description here

和Bootstrap以顯示它：

<img src="{{img}}" alt="{{title}}" class="img-circle" width="60px" height="60px">

但畫面粉碎：

enter image description here

我是否缺少一個引導屬性？或共同的黑客？謝謝！

編輯：

我終於找到了竅門做的工作：

<div class="crop"> 
    <img src="https://i.ytimg.com/vi/EONhJ9qvCPY/default.jpg" alt="#" > 
</div>

而且

.crop{ 
    width: 60px; 
    height: 60px; 
    overflow:hidden; 
    position:relative; 
    border-radius: 50%; 
} 

.crop img { 
    position: absolute; 
    left: -27px; 
    top: -18px; 
}

來源

2016-02-19 kwn

檢查CSS。有一個CSS規則，迫使圖像保持它的比例。 –

鏈接的圖像不是正方形，但是您給它方形的尺寸。它會擠壓。你可以用'clip'裁剪圖像。如果我沒有弄錯，twitter類只是給出了「邊界半徑」。 –

你確定嗎？我在Plunker上嘗試過，它的工作很好。檢查引導鏈接 –

你是什麼意思圖片粉碎？你反對的是一個圈子裏的圖片，或者它在圈子裏顯示的方式？

我認爲首先它是至關重要的理解，因爲在整體上是一個框架包含html，css & javascript的規則。所以要回答你的問題，沒有財產/黑客orso你錯過了。

顯示它顯示的原因是因爲圖像不適合放入60x60圖像（或者更確切地說它是圓圈中的剪裁），因此它會剪出不適合的部分。

我說的是，雖然看起來可能不是這樣，但它仍然需要60x60塊，並在其中放置一個圓圈，並使郊區透明。除了調整原始圖片的大小外，幾乎沒有辦法避免這種情況。

因此，無論

一）編輯在MSPAINT /的Photoshop /瘸子原始圖片任何所以它更適合圓作物內二）引導CSS屬性裏面去改變的寬度和高度屬性IMG。或者爲圖像設置最大寬度和最大高度，以免它卡在60x60分辨率內。

img { 
    width: value; 
    height: value; 
}

爲什麼你會想那樣做的原因，是因爲如果你將要使用在未來的這樣一個形象，你將不必通過指定的HTML代碼的寬度和高度的屬性（這會導致您不必顯示問題和代碼可讀性問題），但它會自動將其應用於使用CSS規則的每個元素。

來源

2016-02-19 19:40:45 Rawrplus

我試圖通過「引導財產」說是一件裁剪圖像，這將改變一個矩形成正方形的屬性，纔能有正確的比例（因爲我需要我的圖片是60 * 60像素） – kwn

我強烈建議在一些圖形編輯器中手動執行此操作（我個人的建議是photoshop，但其他任何方法都可以）。 – Rawrplus

自舉：塊圖像調整大小

回答

相關問題