Responsive images via stylesheet instead of inline

Resizing images without using multiple break points

[gmac6791]

I use this for easy responsive images:

style="max-width:100%; height:auto;

But that only works for inline styling.

Making responsive images can be done in a stylesheet with this:

-webkit-background-size:n%;
-moz-background-size:n%;
background-size:n%;
background-position: n% n%;

But then I have to create multiple break points, and it's for background images.

I also don't want to use multiple versions of the same image at different sizes (large, medium, small, etc.). I want the image to scale gracefully at any size screen, as the above inline style does.

So is it possible to do it in the stylesheet?

[lucy24]

style="max-width:100%; height:auto;

But that only works for inline styling

Why?

[gmac6791]

Please don't reply like that. If you know the answer to my question, please tell me. Otherwise, why reply? I wouldn't be here if that code worked, right?

[graeme_p]

I can see no reason max-width: 100% should not work exactly the same from a style sheet as from inline styling.

If you want a more helpful reply you need to post a demo in which it does not work.

[gmac6791]

Neither of these work for me...


CSS:
#foo {
max-width:100%;
background:url(images/myimage.png) no-repeat 0 0;
}
HTML:
<div id="foo"></div>



CSS:
#foo {
max-width:100%;
}
HTML:
<div id="foo"><img src="images/myimage.png" alt="" title="" /></div>


And it makes no difference when I try using single or double quotes around the image path

[tangor]

I'm surprised that an ordinary bing search for "responsive image css" did not provide many results. I found three on the first page. Might try that. Hint:

img {
max-width: 100%;
height: auto;
}

[not2easy]

tangor is right, images will size to fit the browser if you set their size in just one css line:
img,
embed,
object,
video {
max-width: 100%;
}

You can skip naming all the various configurations like:

-webkit-background-size:n%;
-moz-background-size:n%;
background-size:n%;
background-position: n% n%;

By adding:

<meta name=viewport content="width=device-width, initial-scale=1">

in the header.

The easiest way to make sites more responsive is to rely on browser defaults.

[tangor]

Had second thought... just too late to edit above:

What browser(s) are you testing? And/or failing?

edit: Yikes! Not 3 seconds after post not2easy is there.

Reality, don't over think... just know that the image will be 100% and, for some layouts, that's not quite what you want. If big pic with text above and text below is the desire, regardless of screen size, the above is what you want.

[gmac6791]

@tangor: I have Googled a LOT before even coming here.

@everyone: I have tried multiple methods of coding, in multiple browsers (latest versions of all), and of course I have added the viewport meta tag to my site. The bottom line is, I want to resize an image via stylesheet, NOT inline CSS.

Neither of these work, which I thought should:


<div id="foo"></div>

#foo {
background:url(images/myimage.png) no-repeat 0 0;
max-width:100%;
}

----------

<div id="foo"></div>

#foo {
background:url(images/myimage.png) no-repeat 0 0;
max-width:100%;
height:auto;
}



I have tried it with max-width and just width.


Be aware that I CAN make it work with inline code, but I DO NOT WANT to use inline code. It MUST be stylesheet.
Targeting the <img> element would require placing the image path inline, which is what I do not want to do.

Perhaps there is no way to do it in the stylesheet?

[topr8]

just so we know were're all on the same page here...

could you paste the inline code that you are using:

[matrix_jan]

gmac6791,

Maybe i'm getting it wrong, but if you want your background image to fit the div, use the following in your css:

background-size: contain;

[topr8]

... i only say that bacause a background image and an img tag are two different things
... just guessing from the snippet you showed above

[gmac6791]

Right, I do realize they are two different things :) but I figured there must be a way to get the same result in the stylesheet without depending on online code.

This is the inline code I can use, with no stylesheet support, and it works perfectly:

<div><img src="images/ornaments.png" style="max-width:100%; height:auto;" /></div>
(also works without the <div>'s)

With stylesheet support, this also works perfectly:

<div id="foo"><img src="images/ornaments.png" /></div>

#foo img {
max-width:100%;
}

The goal is to not use any inline image coding. I should be able to use <div id="foo"></div> in the HTML, and do the rest in the stylesheet. ...I hope.

[gmac6791]

Did I stump everyone? lol

[Hoople]

Your 'special' treatment of those that did reply possibly made others decide to not reply, myself included.

Ever hear the bee and honey vs vinegar story? Think not....

For a newbie here you have a lot to learn about WW and I don't mean CSS.

[tangor]

@hoople... while I agree, let's try to help this fellow.

Again a BING search (not GOOGLE) provides all kinds of information. To understand why we are asking for your CSS code, take a look at this page, which explains all the reasons why your query is difficult to assist without answers to our questions:
[mobile.smashingmagazine.com...]
You should find your answers in this article. It would be nice if you drop back and let us know what code you ended up using, and how it all worked for you.

[gmac6791]

tangor, thank you, but I've seen that page a few times before when Googling for tutorials on the subject, but I fail to see anything in it that answers my question. (Not sure why you insist I use Bing?)

Hoople, I'm not actually a newbie here. Signed up in 2004 and have come here often but never had to post because I found the answers I needed each time.

As far as my 'special' treatment of people, I don't see where I was particularly offensive to anyone. In fact, I felt a bit offended at the unnecessary prodding just for what I believe is a simple answer that doesn't necessarily require seeing someone's code, which I did indeed post more than once, and specifically in my most recent post before this one.

~

The question is and always has been quite basic:

How do I make images responsive via stylesheet only, without using any inline code?

Again, my previous post shows exactly what works with inline code. So now I want to achieve the same result without it -- by using only styles in a stylesheet.

Why does everyone need to see code samples? If there is a way to do what I want, then there must be code for it. So what's the code? ...If I were to ask how to make images responsive with inline code, would you reply with the quick & easy solution of this:

<div><img src="images/ornaments.png" style="max-width:100%; height:auto;" /></div>

Or would you ask to see the code I'm already using?

If what I'm asking isn't possible, then why not say so?

None of this post, and indeed none of my above posts, are done with any intent to be angry or insulting or otherwise off-putting. I am VERY frustrated at this point, but if I wanted to treat anyone 'special', it would be way too obvious. ;)

[caffinated]

There seems to be some confusion about whether you're trying to style the div or the background image in the div.

What is the problem? Is the div appearing correctly but the background images to the div is not? Or are both the div and the background image misbehaving?

[caffinated]

Let's take this example you used:
CSS:

#foo {
max-width:100%;
background:url(images/myimage.png) no-repeat 0 0;
}
HTML:
<div id="foo"></div>

Here you have defined that the div has a maximum width of 100% and that it has a background image (myimage.png) but you've not specified that the background-size is 100%, so if the image is larger than the div, it will appear full-size and clipped (to the right, because you specified the image position as 0,0 meaning place this background top left. If you added background-size:100%, then the background should fit the div. You might also want to consider not using max-width on the div, I may be wrong but I suspect simply using width:100% would work.

Your other example is not using a background image. It is a foreground image placed inside a div, so here you want the div size to be defined in the CSS and for the foreground image to be positioned and scaled within that div, e.g.
<div id="foo"><img src="images/ornaments.png" /></div>

#foo {
width:100%;height:auto;
}
#foo img {
width:100%;height:auto;
}
This would mean that the div will occupy the full width of the parent (I assume the width of the screen in your case) but also that the image contained within the div will occupy the full width of the div you just defined.

If it really is a background image you ideally want to use, then elect for the former. If the image is genuinely a foreground image, use the latter.

By the way, the latter could be done more elegantly but I've just laid it out long-hand to illustrate the meaning behind the process.

[matrix_jan]

OP did you read my reply?

Assign this to your div and play with it. Background image size changes along with the size of the div. min-height is needed in order to show the background properly.

#foo {
width: 100%;
background: url('images/myimage.png') no-repeat;
background-size: contain;
height: auto;
min-height: 222px;
}

[caffinated]

oops - matrix_jan's quite right. background-size:contain, not 100%.

[gmac6791]

#foo {
width: 100%;
background: url('images/myimage.png') no-repeat;
background-size: contain;
height: auto;
min-height: 222px;
}

THANK YOU!

I did read your previous reply but didn't apply it properly the first time and it didn't work (my bad). But with your example I now have the answer! Thank you again! That's all I needed to know. :D

And thank you, caffinated, for your reply as well. I hadn't had a chance to try it before seeing matrix_jan's post.

[matrix_jan]

I'm happy it worked for you.

Cheers