在按鈕內拉伸背景圖像以填充按鈕

Question

我試圖創建一個按鈕寬度大的圖像作為背景。 圖像適合顯示，因此它占據了按鈕的所有垂直空間，但是除非我不重復使用，否則圖像將水平重復，在這種情況下，圖像將保留為空白（仍然不會水平填充）。

<button class="tiles" style="padding: 0px; background: url(../static/bilder/tür.jpg); background-size: contain; background-repeat: no-repeat" v-if="selectedCategory==''" >

如何設置樣式以使其延伸到按鈕的整個寬度？ 如果比例搞砸了也沒關系。

Answer 1

您可以使用background-size: 100% 100%; 這將拉伸圖像並弄亂比例或background-size: cover; 它將縮放圖像，保留比例並裁剪圖像

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

首先刪除background-size: contain; 使用后的內聯樣式：

button {
   background-size: cover;
}

 button { background-size: cover; } 

 <button class="tiles" style="padding: 0px; background: url(http://www.incendia.net/hexquilts/image112.png); background-repeat: no-repeat; color: #FFF" v-if="selectedCategory==''">This is test</button> 

Answer 3

嘗試

background-size: cover;
background-position: center center;   

或嘗試添加明確的背景尺寸。

Answer 4

你可以這樣

如果您根據父級div設置高度和寬度或通過提供background-size屬性，則圖像看上去會被壓縮。

您應該獲得更大的圖像，並可以根據需要定位它。

我建議使用圖像標簽並使用圖像響應類，以便它適用於所有分辨率。