圖像的CSS調整大小問題

Question

我正在嘗試使用此背景漸變並將其保持在所有屏幕尺寸的中心（Next.js、React、Sass）

JSX：

      <div className="bg-gradient-container">
          <Image src={Gradient} alt=""/>
      </div>

CSS樣式：

.bg-gradient-container {
  position: absolute;
  top: calc((470px - 32vh)*-1);
  left: calc((1920px - 100vw)/-2);
  width: 1920px;
  z-index: -10;
  animation: appear2 3s ease-in;
}

我已經嘗試了一段時間，但無法弄清楚。 在 gif 中，當我將其設置為桌面模式時，它會很好地調整大小。 當它設置為移動時，它會調整大小，將圖像的整個右側保持在框架中。

奇怪的是，當我將鼠標懸停在 devtools 中的圖像上時，它說寬度是 1920x1080，而文本內容是完整的視口寬度（即使它不占用整個視口？？）。

Answer 1

嘗試使用

left: 50%;
transform: translateX(-50%);

而不是左： calc((1920px - 100vw)/-2);

Answer 2

嘗試：

.bg-gradient-container {
  position: absolute;
  top: 0;
  left: 0;  
  height: auto;
  width: 100%;
  z-index: -10;
  animation: appear2 3s ease-in; 
}

如果這不起作用，您可能需要將height: auto和width: 100%應用於圖像。 這個想法是 Image 元素應該填充它的容器（父元素）。

此外，Chrome 開發工具在使用響應模式時可能會出現一些問題，有時它無法正確調整所有內容的大小。 當您從開發工具的“尺寸”下拉菜單中選擇“iPhone 12 Pro”之類的內容時，圖像是否正確調整大小？