Post icon (featured image) width for Sparkling theme

Hello,
so I have changed the following in the Theme Options

@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}


However, when I publish a new topic with a post icon attached it is narrower than the actual post. Here is a screenshot of what I am talking about. How and where can I widen the image?

Add this code to Theme Options - Other - Custom CSS. It should make your image to cover the entire top section of your article.

.single-featured {
    width: 100%;
}

Let me know if this helps.

Thank you Aigars. It works. :slight_smile:

I was looking for this feature, but with one more tweak.
That code worked fine, but now the images use to be too tall. Could it be some tweak to keep this 100% width adjustment, but also having a max height? The behaviour could be that the image got auto-cropped (the over-height wouldn’t show).

That would be great. Thanks a lot.

@Chaoscontrol

That is not how it works. You can read more about image cropping here: http://codex.wordpress.org/Function_Reference/add_image_size

WordPress won’t crop images that are already too small to fit that size. Of course you can reduce featured image size by half and then stretch using CSS but it would make those images to look like crap and I don’t think you would want that.

Also images can’t be cropped by using CSS, you can try to hide some parts of it by adding some extra element on it or something like that but it is just a hacky way and will break in most of the cases.

Ok, I get what you mean. But, before using the

.single-featured {
    width: 100%;
}

the images were adjusted to fit in what seemed a max height. I mean, the image showed smaller, and width reduced till height was fit.

Why did it have that behaviour and when using this code it lost it? Can’t we keep it?

Height is set to auto, so images won’t get distorted. This code increases with, and of course height is automatically increased to make the same aspect ratio without unnecessarly stretching images. It is not like it shows more of that same image, it is just taller because it is wider.

Forgive me, but i’m not understanding it. Before the code, I was seeing featured images with different widths, being horizontal and vertical images. That’s why I guessed that it was forced to a max height, adjusting width to maintain the ratio.

With the code, it turned forcing it to a max width, adjusting height to maintain the ratio. Is this right?

Yes, it is done to maintain image ration and not distort images. If height would not be set to auto then you would have stretched/distorted images.

Is it possible to widen only the image that is bigger than post width, but smaller image keep original size ?