填充图像并将其调整为屏幕尺寸

Question

我正在尝试用图像填充屏幕，并且图像不失真。我不想把它作为背景图片。我想使用 css 来做到这一点——我知道这是可能的，但我没有找到正确的代码组合。

这是我希望图像执行的操作的示例：

http://kentmatheson.com/index-NEWNEW1.html

您可以看到图像根据屏幕宽度 space 填满屏幕，达到最窄或最宽尺寸，并且没有扭曲图像。这很好，但由于 css img 冲突，不适用于我当前的设置。

我有一个我想使用的设置，在这里：

http://kentmatheson.com/index-NEWNEW2.html

但我无法找到正确的 css 代码组合来使其响应我想要的。如果我填充到图像扭曲的高度，如果我填充到宽度图像不会填满屏幕...

感谢您的帮助。

Answer 1

我终于让它工作了。
干得好！
祝你好运！

---

HTML

<img id="theimg" src="http://interfacelift.com/wallpaper/D7c82ceb/04087_riomaggioreatsunset_3840x2160.jpg">

---

CSS

#theimg {
  width: 100%;
  height: 100%!important;
  object-fit: cover;
  object-position: right;
}