智能手机屏幕中的img大小有问题

Question

我做了一个小的wordpress网站，在智能手机屏幕上，标题图像没有出现我想要的样子。

网站在这里：here

我试图将此代码应用于img div： margin: 0 auto; position: relative; width: 100%;

现在图像尺寸很大，但是我有一个不需要的灰色div。

这就是我得到的：

有人有主意吗？ 谢谢

Answer 1

Try replacing this (around line 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: 75vh;
    width: 100%;
}

with this:

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

Answer 2

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

.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { 
element.style {
    background-size: cover;
    position: relative;
    height: 75vh;
    width: 236vw;
}

Answer 3

只需在代码中添加一行：

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

注意：这将在-webkit浏览器中拉伸图像，如果需要的话，下一步是将图像居中。

欢呼