CSS 使图像以移动视图为中心，同时保持高度相同？

Question

这是我的代码框https://codesandbox.io/s/white-pine-8tfws?file=/styles.css

现在，如果您缩小屏幕，图像就会消失在右侧。 我想让图像以较小的屏幕尺寸为中心，而不是只显示图像的左侧。 我试图让它跨越整个宽度，但是当我缩小它时，质量变得很糟糕，看起来很模糊。

这个网站是一个示例效果，我试图复制https://www.jamesedition.com/real_estate除了可能保持高度相同的比例

I hard coded the tags in my HTML, so I don't know how I would position it since I can't use the background: URL() property because it's a slider and I have to map through a data file.

这是 css

           * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .main {
        position: relative;
        max-height: 1100px;
        height: 100vh;
        width: 100vw;
        margin-top: -60px;
        z-index: 1;
        overflow-x: hidden;
      }

      .section {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: -1;
      }

      h1 {
        position: absolute;
        top: 50%;
        left: 10%;
        font-size: 1.5rem;
        color: #fff;
        text-transform: uppercase;
      }

      img {
        height: 100vh;
        width: auto;
        min-width: 100vw;
      }

Answer 1

只需更换您的 img css，希望这就是您要找的，

img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
  object-position: center top;
}

Answer 2

      height: 100vh;
  width: auto;
  min-width: 100vw;
  background: url('src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"') no-repeat center center;
}

Answer 3

在您的图像中添加此样式：

  height: auto;
  width: 100vw;
}

如果需要，在此处添加min-height 。

它将保持您的图像全宽并保持高度自动，这样图像质量就不会受到影响。 很难为所有设备保留一张图像并且不损失质量，因为视口更改和纵横比也需要更改。