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
min-width:xxx px;
wherexxx px
is the minimum width of each breakpoint size. I've tried it into a theme I am developing, the downsize is that I have to use either javascript or the full image for these situations.