0

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

Improve this question
1
  • You can put min-width:xxx px; where xxx 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. – Panagiotis Mar 7 '14 at 22:09
2

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%;
}
Improve this answer
0

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; }
Improve this answer
3
  • this will not work in all cases, if I set a CSS rule to keep it 300px, the image will get stretched, as its natural size would be 500x300, width 100% would make it 883px by 300px. It's getting cropped before CSS is applied to it. – RCNeil May 20 '13 at 17:10
  • can you give me link of you site ? – Ravinder Kumar May 20 '13 at 17:19
  • Is hiding the overflow of the img container not enough ? .container { width: 883px; height: 300px; overflow: hidden; } .container img { width: 100%; height: auto; } The image is not cropped but it looks cropped. You could use % instead of px to define container size. – Simon Nov 22 '13 at 14:43
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.