标题图像调整大小

Question

我需要一些帮助，当我调整窗口大小时，图像的高度或宽度没有调整好，我正在使用 WordPress 主题 27，我使用以下代码来降低高度并删除标题图像中的图像二十七主题。图片相关

.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

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

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

---

要调整图像大小，您可以通过在 head 标签之间添加以下行来使用引导程序，并将 img-responsive 类添加到预期图像。

（由于您使用的是 WORDPRESS，因此您将需要以下内容，因为 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 代码并从 div class="wp-custom-header" 中的 html 代码中删除标签，而使用以下 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';
 }

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