CSS-Bild wird auf 100 % Höhe gestreckt

Ich habe das CSS, egal was ich tue, es dehnt das Bild aus, aber ich sehe nicht, wie klein das Bild ist, aber es macht es zu einer massiven Höhe, die ich verwende

<?PHP the_post_thumbnail( 'full' );  ?>

Das verwendete CSS ist das folgende, aber wie Sie sehen werden, wird es verursacht meine Bilder zu dehnen und nicht die richtige Größe haben.

.services-icon img {
    max-width: 100%;
    display: block;
    width: 200px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

URL ist hier

http://www.lockmsiths.solitudesoftware.co.uk/#site

Dein <img> Tag hat ein width und ein height Attribut von WordPress gesetzt.

<img width="1000" height="500" ... >

In Ihrem CSS können Sie eine automatische Höhe festlegen, um das Seitenverhältnis gemäß Ihren Angaben beizubehalten 200px Breite:

.services-icon img {
    height: auto;
}

Beachten Sie, dass Ihr CSS Ihre WordPress-Einstellungen für dieses Bild überschreibt.

Mit können Sie die automatische Einstellung der Höhe erzwingen height: auto; im CSS. Viel besser wäre es, die tatsächliche Bildhöhe in WordPress so zu ändern, dass die width und height Attribute auf dem Bild sind korrekt (wie @andreas erwähnt).

Entfernen Sie die Breite: 200px in Ihrem CSS, wenn Sie möchten, dass die Bilder die 100%-Breite im Container verwenden. Das Tag hat Breiten- und Höhenattribute, entfernen Sie es. Wenn Sie diese Inline-Attribute nicht kontrollieren können, können Sie Javascript verwenden und es entfernen.

Verwenden Sie in diesem Fall height: auto nicht, da der Browserstil diesen Stil anwendet. Aber ich empfehle Ihnen, es zu benutzen.