标题图像调整大小

Question

我需要一些帮助，当我调整窗口大小时，图像不会调整高度或宽度，我使用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;
}

Answer 1

您可以使用像

这样的像素安全地将图像设置为最小宽度和最小高度

<!-- 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>

要调整图像大小，可以通过在head标记之间添加以下行来使用bootstrap，并将类img-response添加到目标图像中。

（由于你正在使用WORDPRESS，因为WP已经包括BOOTSTRAP，所以你需要以下内容）

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

这些链接是从https://www.w3schools.com/bootstrap/bootstrap_get_started.asp复制的，你也会找到一个关于如何在那里使用bootstrap的非常好的教程。

并回答您添加的评论， 请使用以下css代码并从div class =“wp-custom-header”中的html代码中删除标记，而是使用以下css代码

df3 <- data.frame(x=seq(-6,6,b=0.1),y=sapply(seq(-6,6,b=0.1),function(x) dnorm(x))) 
ggplot(df3,aes(y,x))+ geom_line()  # x,y position exchanged

Answer 2

height: 66% !important;

设置的高度值会使标题图像失真。

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

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

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

摆脱您在图像上设置的高度。

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

删除多余的空间。

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