Px in responsive?

HTML & CSS
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 %?

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/

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%:

img {
	border: 1px solid blue; 
	padding: 4px;
	background: green;
	vertical-align: bottom;
        -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	[COLOR="#FF0000"]box-sizing: border-box;
	width: 100%;[/COLOR]
}
4

Thanks.

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.

5

What I posted has pretty good support even back to IE8, so that should be safe to use.

6

Thanks.

When I responded to the earlier post, I hadn’t seen your suggestion.

I agree that it seems the sane option.