Comments on: How to Create a Responsive Centered Image in CSS3

By: Craig Buckler

Craig Buckler — Thu, 09 May 2013 18:03:52 +0000

Hi DWD. Do you mean a data-encoded image defined in HTML or CSS? If so, then yes – it should work.

By: Ben

Ben — Thu, 09 May 2013 16:05:46 +0000

Nevermind, I see that it wouldn’t work in this situation. Doesn’t help with vertical centering and not very useful in absolute positioning.

By: Ben

Ben — Thu, 09 May 2013 15:35:21 +0000

What happened to

{
display: block;
margin: 0 auto;
}

for centering?

By: Craig Buckler

Craig Buckler — Mon, 06 May 2013 09:03:28 +0000

Hi Lee. I think I understand your point but, in practice, the browser should size the image correctly.

With regard to :empty, a search and replace may be enough if you’ve not used it for other selectors. That said, why remove it? Even if you’re dropping further IE8 development, it doesn’t follow that you must rip out all IE8-specific code you previously wrote. You’d only be saving a few bytes and the browser is likely to stick around for many, many years.

By: Lee

Lee — Sun, 05 May 2013 04:40:17 +0000

Isn’t it safer to use both max-height and max-width regardless of orientation? If you have a really wide panorama on a landscape device, it may not be enough to constrain by height. The image will remain proportional if both are in place, right?

I think the :empty trick is clever. However, if you decide to stop supporting IE8, it will much harder to pull the plug because the code is mixed throughout your file. You may be serving those extra characters to modern browsers for a while before you get a chance to refactor everything.

By: Reilly

Reilly — Thu, 02 May 2013 03:18:50 +0000

This one works perfect, this is the way to go!

By: DWD

DWD — Sat, 27 Apr 2013 14:35:57 +0000

Hi Craig, Do you know how it would work with a img string styled image or if it would even work at all? Thanks for your time and expertise.

By: Craig Buckler

Craig Buckler — Fri, 26 Apr 2013 14:24:04 +0000

Try the demo outside of the code editor…
http://cssdeck.com/labs/full/responsive-image

By: Craig Buckler

Craig Buckler — Fri, 26 Apr 2013 14:22:31 +0000

Ahh, but you need a space between :root and the other selector so there’s no saving! It’s another good option though, thanks.

By: Craig Buckler

Craig Buckler — Fri, 26 Apr 2013 14:20:54 +0000

Hi DWD. Only images with class=”ri” in the tag should be affected. Remove that class from an image and the problem should disappear.

By: DWD

DWD — Fri, 26 Apr 2013 12:27:18 +0000

I’m a newbie, so please bear with me. When I put in the code it moves all of my images of place…
Do I have to style the position of each image in the img html string to get this to work correctly?
Thanks in advance for any help.

By: Larry Botha

Larry Botha — Fri, 26 Apr 2013 08:02:07 +0000

Didn’t know about :empty, but I use

:root .class {}

to target IE9+. You can crunch off 1 additional character :P

Nice technique! Interesting alternative to using display: table;

http://www.hughlashbrooke.com/two-methods-for-vertical-centering-in-css/

By: Peeter Jozaf

Peeter Jozaf — Fri, 26 Apr 2013 06:34:53 +0000

Hello,
Thanks for sharing excellent post. I am new in this filed and now i got it.

By: Michael G

Michael G — Thu, 25 Apr 2013 20:22:58 +0000

The demos above displayed fine for me in Chrome but neither displayed at all for me in IE9.0.8xxx. Both look terrific in IE10.