How to stretch and image in a responsive website in CSS

Question

I have a series of images in a slide show, which have all be uploaded at different image dimensions, I want to essentially make all the images follow a rule whereby they stretch, proportionally to the max width so that if you resize the browser window, they will still keep their fluid resizing response also.

Here is the website template and the images in question.

Would love to be able to do it in CSS if possible.

I'm having trouble stretching small images to fit into a larger container, rather than trying to contain large images in a small container. Usually the smaller image stops resizing once it's hit its actual pixel dims and I want them to continue to stretch proportionally, even if this pixelates them.

possible duplicate of [Image resize to fit screen](http://stackoverflow.com/questions/2569192/image-resize-to-fit-screen) — Marcos Pérez Gude, Aug 03 '15 at 10:22
Possible duplicated: http://stackoverflow.com/questions/2569192/image-resize-to-fit-screen — Marcos Pérez Gude, Aug 03 '15 at 10:22
This might help you: http://stackoverflow.com/questions/31336306/standardize-image-into-div/31336568#31336568 — there really is a tone of questions on this thing if you try the search. — Gerico, Aug 03 '15 at 10:28

Henry Gibson · Answer 1 · 2015-08-03T10:33:19.067

The key to solving this is using background images and their CSS properties. Rather than inserting the images as <img> tags you should create containers with a background image set

<div class="slide" style="background-image: url(image1.jpg)"></div>

Give those containers some styling so they fill out your slideshow area.

position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;

Then you can use background-size: contain; to make the image sit within the containers using pure CSS. It'll never extend outside of the area, but will fill it as much as possible. Also use background-position: center; and turn off image repeat using background-repeat: no-repeat; - then you'll have a single image centred and as large as it can be.

Full CSS is as follows:

position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat;

You'll be able to use CSS transitions to control how the slideshow moves between slides.

Thanks Henry, I'll give it a go and let you know. – Andrew M Aug 03 '15 at 11:29 — Andrew M, Aug 03 '15 at 11:29

How to stretch and image in a responsive website in CSS

1 Answers1