CSS-Bild wird auf 100% Höhe gestreckt

Question

Ich habe die CSS egal, was ich sein tue das Bild Streching aber ich sehe nicht, wie das Bild klein ist, aber sein ihm massive Höhe machst ich bin mit

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

Das verwendete CSS ist das folgende, aber wie Sie sehen werden, verursacht es meine Bilder zu strecken und nicht von der richtigen Größe zu sein.

.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

Answer 1

Ihr <img> Tag ein width und ein height Attribut von Wordpress.

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

In CSS können Sie ein Auto-Höhe eingestellt Seitenverhältnis beizubehalten, entsprechend Ihrer 200px Breite:

.services-icon img { 
    height: auto; 
} 

Denken Sie daran, dass Ihre CSS Ihre Wordpress-Einstellungen für dieses Bild überschreibt.

Answer 2

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

Ist nicht notwendig verwenden Sie Höhe: Auto in diesem Fall, weil der Browser-Stil diesen Stil anwenden. Aber ich empfehle Ihnen, es zu benutzen.

Answer 3

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