Header Bildgröße ändern

Question

Ich brauche etwas Hilfe, wenn ich die Größe des Fensters verkleinern das Bild nicht mit guter Höhe oder Breite Größe, ich benutze WordPress Theme siebenundzwanzig und ich benutze den folgenden Code, um Höhe zu reduzieren und Aminierung zu entfernen Headerbild in Thema mit zwanzig siebzehn. pic Zusammenhang

.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

height: 66% !important;

Der eingestellte Höhenwert ist, was Ihr Header-Bild verzerrt.

EDIT: Versuchen Sie object-fit: contain !important; und sagen Sie mir, ob es funktioniert.

EDIT_2: Entfernen Sie alle Höhe, die Sie auf Ihrem IMG festgelegt haben und das Grau sollte verschwinden.

EDIT_3: Sagen Sie mir, wie es geht und markieren Sie diese Antwort als richtig, wenn ich Ihnen geholfen habe und es anderen helfen wird, das gleiche Problem zu haben.

---

Sie sich von der Höhe, die Sie auf dem Bild gesetzt haben befreien.

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

---

den zusätzlichen Platz entfernen.

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

Answer 2

Sie können die Bilder auf eine min-width und min-height mit Pixeln wie

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

---

Um die Größe des Bildes Sie verwenden könnte Bootstrap sicher eingestellt durch Fügen Sie die folgenden Zeilen zwischen den Kopf-Tags hinzu und fügen Sie die Klasse img-responsive zum beabsichtigten Bild hinzu.

wurden

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

Diese Links von https://www.w3schools.com/bootstrap/bootstrap_get_started.asp kopiert (da Sie Wordpress verwenden Sie WONT DIE WEITEREN ALS WP beinhaltet bereits BOOTSTRAP mehr brauchen), werden Sie auch ein sehr gutes Tutorial finden, wie Bootstrap dort zu verwenden, .

Und den Kommentar zu beantworten, die Sie hinzugefügt haben, Sie bitte den folgenden CSS-Code verwenden und Tag aus dem HTML-Code in div class = "wp-custom-header" entfernen und stattdessen verwenden Sie den folgenden CSS-Code

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