I’ve been struggling with this issue for a while, and just wondered if anyone has any advice! Basically I want to place images inside the container, that will resize with the browser window. So how else can I make it responsive? Thank you in advance!
</div> <!-- end special-dishes -->
</div> <!-- end container -->
</div> <!-- end special-dishes-section -->
This will also work with non-square boxes provided you make the relative shape of the box the same ratio of the image (e.g. if the image is 3 times wider than it is high, the box needs to be 3 times wider than it’s high) - I’m using it for a logo insertion in a header, and can re-size the window and have the logo keep a consistent look throughout the window shape.
Never mind…I re-read it and understand what you’re talking about. The image can distort (i.e. pixelate) if you use an image that is too small for the content…the one I used is larger than should be required, which is why mine never distorted.
Sorry - that was my misunderstanding of the point of his post. He was talking about the distortion of the image itself, which can happen if you use an image noticeably smaller than the space it’s supposed to be in. For example, trying to use a 10x10 image in a space that is 40x40.
If you look at the page he linked to which has the play buttons, try out the different options and watch how the image looks when you switch to the different sizes - does it look the same.
I was thinking that he was talking about the image skewing in appearance (stretching wider but keeping the same height), but that’s not what he wrote.
Contain means that your background image will be scaled until it all fits in the background that you have available. That probably means there will be white-space around the image in order for it to fit.
Cover means that the image will cover the whole background while maintaining aspect ratio. It does this by scaling the background image so that the smallest dimension reaches the maximum width/height of the element.
As Ron said you can stretch the image with 100% 100% but the image will be distorted and the results will be pretty bad at some sizes.
What you are trying to do is not very web friendly in that you are trying to basically hang fluid text on a fixed image. It would be ok if you were just going that for the logo but you are unlikely to get any good results with all that text.
You need to re-think this a little I think
You could just use the image at the largest screen size and then perhaps swap it for a square repeating background at smaller sizes so that it can stretch as required.
The only alternative will be the old school method where you top and tail the image and then repeat the middle section so that the element can grow. Of course you will then need to make different sets of images to match your breakpoints also.
All in all its not a viable method unless you want a lot of code bloat or unless you are happy with a stretched and distorted image.