Wiiiiiiiiiide Image on Blog Main Page

[EyeDoc]

The images on blog.shopvisivite.com are distorted to full width but very short height (I think 473 x 170px), whereas clicking blog link reveals the image to be in correct orientation.

I want the the images to be full width but automatic height, thereby maintaining the original dimensional shape.

Is this a featured image wrapper issue?

At Line 1695 of the CSS template, I see:

.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {

  max-width: 100%;

  float: left;

  width: 100%;

  margin: 10px 0;

How do I achieve my goal of having a non-distorted image?

[dennisedson · Accepted solution]

@EyeDoc,

set the width to auto.

you have a float on it so if you dont what it to float, you will need to change that as well

removing it will invoke float right as you have that as a css rule as well.

try this:

.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {
    max-width: 100%;
    float: none;
    width: auto;
    margin: 10px auto;
    display: block !important;
}

[EyeDoc]

Better, Dennis! Now the images look normal.

But the height of about 180px is limiting their size which is too small. Instead, I'm seeking the 100% width of the page to determine the image width, and then have the vertical size automatically adjust so that the image remains in proportion.

Can that be done?