沒關系，但我正在使用https://getwaves.io/生成 SVG 影像。
應該發生什么
藍色波浪應該在灰色框中占據更多的垂直空間。它似乎不使用object-fit: cover.
事實上，它應該遵循框的大小，就像一個邊界框。
我已經嘗試過了
- 將高度和寬度設定為 100%
- 設定物件適合覆寫
- 確保有一個viewbox
- 確保沒有其他寬度和高度
例子
它表明 JPG 影像可以正常作業，但 SVG 影像不能。
問題
我該如何解決？
.wrap {
height: 300px;
width: 300px;
background: #eee;
}
svg, img {
object-fit: cover;
height: 100%;
width: 100%;
}Just the SVG file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
SVG in a box - Does not work
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
</div>
JPG in a box - Do work
<div class="wrap">
<img src="https://placekitten.com/96/139">
</div>uj5u.com熱心網友回復：
首先，您可以使用屬性preserveAspectRatio="none"on <svg>。如果您指定高度和寬度，這將拉伸 SVG。其次，您的路徑位于 y 軸下方約 200 處。因此，當它拉伸時，路徑上方的透明區域也會占用更多空間。我移動了路徑，使其幾乎在頂部達到 y=0。現在路徑只占用了 113 的高度，拉伸時它會填滿整個盒子。
我使用SvgPathEditor來編輯路徑。
.wrap {
height: 300px;
width: 300px;
background: #eee;
}
svg, img {
height: 100%;
width: 100%;
}Just the SVG file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113">
<path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>
SVG in a box - Does not work
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113" preserveAspectRatio="none">
<path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>
</div>
JPG in a box - Do work
<div class="wrap">
<img src="https://placekitten.com/96/139">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459440.html