标题图像调整大小

问题描述：

我需要一些帮助，当我调整窗口大小的图像不调整高度或宽度，我使用WordPress主题二十七，我用下面的代码来降低高度和删除胺化，在二十七个主题的标题图象。 PIC相关标题图像调整大小

.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 { 
height: 66% !important; 
object-fit: fill !important; 
width: 100%; 
max-height: 100% !important; 
display: block !important; 
position: relative !important; 
} 

#wp-custom-header { 
height: 100% !important; 
}

尝试在'img' –

上添加'max-width：100％''我已经在我的'img'中添加了这个'max-width：100％！important; 最大高度：100％！重要; 显示：block！important; 位置：相对！重要; }' –

不，你不......不在你提供的CSS中。 –

答

~~height: 66% !important;~~

设定高度值是什么扭曲了你的头形象。

编辑：尝试object-fit: contain !important;并告诉我它是否有效。

EDIT_2：删除你在img上设置的任何高度，灰色应该消失。

EDIT_3：告诉我它是怎么回事，并且如果我帮助过你，这个答案就是正确的，它也会帮助其他人也有同样的问题。

摆脱你的图像上设定的高度。

#wp-custom-header > img { 
    height: auto !important; 
}

删除多余的空间。

.custom-header { 
    height: 25vw !important; 
}

我删除，但我仍然有问题时，我调整窗口的小窗口'img'仍与高度问题。 –

Dubosky，我编辑了我的答案。再试一次，告诉我它是怎么回事！ –

它的工作，但它正在显示新问题图像中的灰色空间我现在需要删除他，我插入新的图像。 –

答

您可以将图像安全地设置为最小宽度和使用最小高度像素像

img{ 
    max-width: 420px !important; 
    max-height: 270px !important; 
    width:100% 
    display: block !important; 
    position: relative !important; 
    }

为了使图像调整，你可以通过使用自举在头标签之间添加以下几行，并将img-responsive类添加到预期图像。

（因为你是使用WordPress你不会需要下面的AS WP已经包含了自举）

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这些链接是从https://www.w3schools.com/bootstrap/bootstrap_get_started.asp复制，你还可以找到关于如何使用引导程序有一个很好的教程。

并回答您所添加的评论，请使用以下的CSS代码和HTML代码中的div类=“WP定制头”删除标记，而使用下面的CSS代码

.wp-custom-header{ 
background-image: url('http://web.ipca.pt/poliempreende/wp- 
content/uploads/2017/05/Logo-IPCA-Poliempreende.png'); 
background-repeat:no-repeat; 
background-size: 'find out which size you want'; 
}

但我尝试'max-width：420px！important; max-height：270px！important;'图像仍然不能调整为小窗口（移动窗口） –

我已编辑我的答案为你@ A.Dubosky – jukerok

我需要添加此链接的权利？ –

标题图像调整大小

相关推荐