html - 如何使背景图像看起来成比例？

Question

我有带背景图片的登录页面，问题是 cus 图片看起来不像原始照片:

检查屏幕截图 - 图片宽度有问题:

这是页面的 HTML/jsx:

 <div className="login-page">

   <picture>

     <source srcSet={mobileImg} media="(min-width: 400px) and (max-width: 700px)" />

     <source srcSet={tabletImg} media="(min-width: 700px) and (max-width: 900px)" />

     <img srcSet={desktopImg} className="login-background" alt="background image" />

   </picture>

   <div className="login-wrapper">{children}</div>

 </div>

这是CSS部分:

.login-page {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    background-size: cover;
}

.login-wrapper {
    align-self: center;
    position: absolute;
}

.login-background {
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center center;
}

如何使图像响应？

Answer 1

<img>显示的图像background-* 不处理标签CSS 属性。你可以使用 object-fit: cover相反