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

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;
}