如何在隱藏了溢出的div中將內容居中

Question

我的其他代碼大師。

我正在嘗試使標頭樞轉到中心。 我希望使用overflow：hidden進行剪輯，但是當我調整屏幕大小以使其為縱向時，它將剪輯圖像的右側，而在其橫向時，它將剪輯底部。 我希望它同樣剪輯頂部，右側，底部和左側。

真實的圖像更加復雜，僅以它為例。

像transform-origin：center這樣的東西超級好，但是在這種情況下不起作用。

我做了一個筆頭技巧

提前致謝！

  body{ margin: 0; padding: 0; } .header{ width: 100%; height: 90vh; overflow: hidden; background-color: black; } .theSVG{ width: 100vmax; height: 100vmax; } 

  <div class="header"> <svg viewBox="0 0 1000 1000" class="theSVG"> <rect width="1000" height="1000" style="fill:rgb(0,0,255);stroke- width:3;stroke:rgb(0,0,0)" /> <rect width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <rect y="150" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <rect y="750" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <rect y="900" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <circle cx="500" cy="500" r="500" stroke="green" stroke-width="4" fill="yellow" /> </svg> </div> 

Answer 1

更改您的.header {}和thesvg {}樣式，並使它們如下所示-

 body{ margin: 0; padding: 0; } .header{ width: 100%; max-height: 90vh; overflow: hidden; background-color: black; } .theSVG{ max-width: 100vmax; max-height: 100vmax; } 

 <div class="header"> <svg viewBox="0 0 1000 1000" class="theSVG"> <rect width="1000" height="1000" style="fill:rgb(0,0,255);stroke- width:3;stroke:rgb(0,0,0)" /> <rect width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <rect y="150" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <rect y="750" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <rect y="900" width="1000" height="100" style="fill:rgb(255, 0, 0);stroke-width:3;stroke:rgb(0,0,0)" /> <circle cx="500" cy="500" r="500" stroke="green" stroke-width="4" fill="yellow" /> </svg> </div> 

它將對您所有瀏覽器的大小都做出響應。

Answer 2

如果將SVG存儲在文件夾中，然后將其設置為標題的背景圖像，是否可以解決您的問題？ 然后，您可以將背景尺寸設置為覆蓋，將背景位置設置為居中。 這將在所有方面平均分配。

就像是：

.header{
    width: 100%;
    height: 90vh;
    overflow: hidden;
    background-image: url("assets/img/header-bg.svg");
    background-size: cover;
    background-position: center;
}

Answer 3

選擇1：

您可以嘗試object-fit：cover屬性。 Dunno是否具有您需要的瀏覽器支持。

問- 是否有與background-size相等的圖像元素：cover和contains？

文檔： https : //developer.mozilla.org/en-US/docs/Web/CSS/object-fit

選擇2：

使用翻譯。

Q- 在較小的div內居中放置未知大小的大圖像，並隱藏溢出