将图像填充和调整大小以适应屏幕尺寸

Question

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

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

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

您可以看到图像将屏幕空间填充到最窄或最宽尺寸的大小，具体取决于屏幕宽度，并且不会扭曲图像。这很好，但由于 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;
}