CODEWITHSUNDEEP
htmlcsswordpressimageimage-size
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

css image being stretched to 100% height

I have the css no matter what I am doing its streching the image yet I dont see how the image is small but its making it massive height I am using 

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

The css used is the following but as you will see its causingenter image description here my images to strech and not be of correct size.

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

Url is here

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

Upvotes: 3

Views: 2505

Answers (3)

Mario Junior Torres Perez
Mario Junior Torres Perez

Reputation: 139

Remove the width: 200px in your css, if you want the images use the 100% width in the container. The tag has width and height attributes, remove it. If you can't control those inline attributes you can use javascript and remove it.

Is not necessary use height: auto in this case, because the browser style apply that style. But I recommend you to use it.

Upvotes: 0

andreas
andreas

Reputation: 16936

Your <img> tag has a width and a height attribute set by Wordpress.

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

In your CSS you can set an auto height to maintain aspect ratio, according to your 200px width:

.services-icon img {
    height: auto;
}

Keep in mind, that your CSS overwrites your Wordpress settings for this image.

Upvotes: 5

tech4him
tech4him

Reputation: 980

You can force the height to be automatically set with height: auto; in the CSS. It would be much better to change the actual image height in WordPress so that the width and height attributes on the image are correct (like @andreas mentioned).

Upvotes: 0

Related Questions