Add Image Size for Featured Image with Responsive Design

Question

So, I know that I can make a custom featured-image size by adding this to my functions.php file:

add_image_size('newsize', 883, 300, true);

and calling it with:

the_post_thumbnail('newsize');

But, I also have CSS rules to make images responsive by including:

img { display:block; width:100%; height:auto; }

So, what's happening is, if someone uploads an image that exceeds the image size I specified (883x300), then the image is cropped, and when I call it, I get a perfect 883 x 300 image.

Unfortunately, if I have an image that is smaller than those dimensions, the function still works as it should (cropping the width or the height if they exceed), but then the image falls short of filling that canvas space (883 pixels.)

So for example, if I load an image that is 500x350 in the featured image, normally calling that featured image would output a 500x300 image, but because images are meant to be responsive, CSS stretches that image to be 883 pixels wide, the size of the div. That, in turn, makes the height larger, as it stretches both dimensions. It's imperative that the image height does not exceed 300 pixels.

So... how can I have my cake and eat it too? Is there a way I can force a smaller image into a 883x300 canvas before my CSS gets to it to stretch it out?

Many thanks, WA

Answer 1

You can wrap the image in a figure.

<!-- html -->
<figure class="constrained-container">
    <img src="my-image.jpg" alt="What my image is about"/>
</figure>

Then style the figure as well as the image.

/* css */
.constrained-container {
    height: 300px;
    overflow: hidden; /* this hides excess of the image */
}
.constrained-container img {
    display: block;
    width: 100%;
}

Answer 2

So if you know your height of image is 300px, then not put height auto in css make it 300px. ( or adjust height according to your design )

img { display:block; width:100%; height:300px; }

Answer 3

When dealing with the images in responsive site, i enclose the image in a div and i fix the image width (in percentage) you need not fix the height.Irrespective of the image size it will be responsive.