Welcome to WebmasterWorld Guest from 107.20.5.156

Forum Moderators: not2easy

Message Too Old, No Replies

Responsive images via stylesheet instead of inline

Resizing images without using multiple break points

     

gmac6791

10:17 pm on Mar 28, 2014 (gmt 0)

10+ Year Member



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

12:53 am on Mar 29, 2014 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

But that only works for inline styling

Why?

gmac6791

8:24 am on Mar 29, 2014 (gmt 0)

10+ Year Member



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

9:02 am on Mar 29, 2014 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

12:33 am on Mar 30, 2014 (gmt 0)

10+ Year Member



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

1:05 am on Mar 30, 2014 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

3:30 am on Mar 30, 2014 (gmt 0)

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



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

3:31 am on Mar 30, 2014 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

5:12 pm on Mar 30, 2014 (gmt 0)

10+ Year Member



@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

5:30 pm on Mar 30, 2014 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

could you paste the inline code that you are using:

matrix_jan

5:38 pm on Mar 30, 2014 (gmt 0)

5+ Year Member



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

6:16 pm on Mar 30, 2014 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



... 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

6:32 pm on Mar 30, 2014 (gmt 0)

10+ Year Member



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

11:31 pm on Mar 30, 2014 (gmt 0)

10+ Year Member



Did I stump everyone? lol

Hoople

4:17 am on Mar 31, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

5:25 am on Mar 31, 2014 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@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

10:28 am on Mar 31, 2014 (gmt 0)

10+ Year Member



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

12:38 pm on Mar 31, 2014 (gmt 0)

5+ Year Member



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

2:53 pm on Mar 31, 2014 (gmt 0)

5+ Year Member



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

4:30 pm on Mar 31, 2014 (gmt 0)

5+ Year Member



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

4:40 pm on Mar 31, 2014 (gmt 0)

5+ Year Member



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

gmac6791

8:08 pm on Mar 31, 2014 (gmt 0)

10+ Year Member




#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

12:08 am on Apr 1, 2014 (gmt 0)

5+ Year Member



I'm happy it worked for you.

Cheers