Auto Resize of Images

[lesleelanglands]

Hi there,

I am working on converting a site to be responsive and it is quite heavy in images (each page has a different header image). Is there a way with css that I can make the images resize in my soon to be fluid layout?

Thanks!
Leslee

[Paulie_D]

It’s a very broad question and without code it’s hard to help

A quick google for “responsive images” will point you in the right direction.

[lesleelanglands]

Thanks for responding…

Here is the html

And the css

#header_content {
position: relative;
z-index: 35;
height: 137px;
width: 100%;
top: 28px;
left: 0px;
margin-left:auto;
margin-right:auto;
padding-left: 15%;
float: none;
clear: none;
}

[lesleelanglands]

Not sure how to get the html to show…

[lesleelanglands]

Sorry I dont have a codepen account..

Making my image 100% width resizes it.

Sorry I am a new to the responsive design. I am just figuring out the best way to layout my site again, which previously used absolute positioning.

[lesleelanglands]

Can anyone help on this?

[Paulie_D]

Sorry I dont have a codepen account..

You don’t need an account…

Just make the demo you need with enough code to actually show the problem…hit the save button at the top and then copy the link and paste it here.

[cssgirl]

Instead of using width: 100%, have you tried using max-width: 100%? Than the images shouldn’t ever be wider than the width of the browser/device (or it’s container).

But do note, if the image had a height attached you will have to set the height to auto or some other override so the ratio won’t get wonky on resize of the page… (e.g the height will stay fixed to whatever is set in the HTML but the width will be flexible).

[carinlynchin]

if you want responsive maybe you should do media queries.

[gvinson]

Moving a fixed width site to a responsive one can be quite daunting for sure. What I would recommend would be to set the max-width of the image to 100% and remove the height.

If you need a specified height, create a div that is the desired height/width and set the image as a background image for that div. Play around with background positioning and background sizing properties to get it to flow right.

After that, media queries are the next big thing to consider.

[Author]

Posts