gulliver — 2013-05-21T09:09:55-04:00 — #1
Currently converting my fixed width site to responsive, I'm unsure on how best to handle one specific element.
I have some images the full width of the main text column, coded as the image plus 4px padding and a 1px border.
I'd quite like to keep that 4+1px proportion even on small displays.
What's the sensible way of doing this? Or is it simply not possible to retain px within a responsive design, and I therefore have to convert to %?
davemaxwell — 2013-05-21T09:25:12-04:00 — #2
You can still do that - what you'll need to do is adjust the size of the images. Do a search for responsive images, and you should get the information you need.
Here's one site I found on a quick search, but I know there are a ton more out there....http://css-tricks.com/on-responsive-images/
ralphm — 2013-05-21T11:33:25-04:00 — #3
I believe one way around this is with the newish border-box property. The key is to use this in combination with width: 100%:
border: 1px solid blue;
<font color='"#FF0000"'>box-sizing: border-box;
gulliver — 2013-05-21T11:35:06-04:00 — #4
I've already read much before posting - and have yet to find any thing that's reliable. And the article you suggested doesn't appear to help.
ralphm — 2013-05-21T11:42:34-04:00 — #5
What I posted has pretty good support even back to IE8, so that should be safe to use.
gulliver — 2013-05-21T12:00:27-04:00 — #6
When I responded to the earlier post, I hadn't seen your suggestion.
I agree that it seems the sane option.