Css 智能手机屏幕img大小问题

我制作了一个wordpress网站，在智能手机屏幕上，我的标题图像并没有像我所希望的那样出现

网址如下：

我试图将此代码应用于img部门：

margin:0自动；
位置：相对位置；
宽度：100%

现在的图像大小是伟大的，但我有一个灰色的div旁边，我不想

以下是我得到的：

有人有主意吗？
谢谢
尝试替换此（第1651行附近）：

为此：

.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    display: table;
    height: auto;
    width: 100%;
}

在移动屏幕上添加以下属性：


。具有标题图像。自定义标题媒体img。具有标题视频。自定义标题媒体视频。具有标题视频。自定义标题媒体iframe。具有标题图像：非（.twentyeven首页）：非（.home）。自定义标题媒体img{
元素风格{
背景尺寸：封面；
位置：相对位置；
高度：75vh；
宽度：236vw；
}
只需在代码中添加一行：

#wp-custom-header img {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: -webkit-fill-available;
}

注意：这将在-webkit浏览器中拉伸图像，如果您愿意，下一步将是将图像居中

干杯
对我来说很好。你看到了哪个设备/浏览器的问题？这似乎是一个缓存问题所有的设备/浏览器，但特别是在谷歌Chrome浏览器上的iPhone 6/7/8中进行测试@JackI删除了它。但似乎不起作用。我更新了我的帖子，结果是我在
上得到了@temaniafiry
object fit:cover；
，谢谢，但是它不起作用，图像太大了。我希望图像的宽度是正常的（宽度是100%，高度会随之变化）。@Bögözithanks但它不起作用，当我应用它时，我有一个非常小的图像，大约只有10px的高度。。。
#wp-custom-header img {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: -webkit-fill-available;
}