如何使背景图像看起来成比例？答案

【问题标题】：How to make background image to looks proportional?如何使背景图像看起来成比例？
【发布时间】：2019-12-01 12:35:56
【问题描述】：

我有带有背景图片的登录页面，问题是 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;
}

如何使图像响应？

【问题讨论】：

截图中图片的呈现方式有什么问题？

标签： html css reactjs sass

【解决方案1】：

<img> 标签显示的图像不是由background-* css 属性处理的。你可以改用object-fit: cover

【讨论】：

@MarkJames 这在 IE11 中不受支持。 Caniuse

【解决方案2】：

我相信您的问题是图像在没有保留纵横比的情况下呈现。背景属性不适用于img 标签。所以下面的代码对你不起作用。

/* Will not work for img */
background-size: cover;
background-position: center center;

使用下面的代码，它与您使用的背景属性相似。

img {
  object-fit: none;
  object-position: 50% 50%; 
  /* OR */
  object-position: center;
}

更多信息请参考此链接：https://css-tricks.com/almanac/properties/o/object-position/

【讨论】：