CSS Image resize question - GoFuckYourself.com

AdultKing · 06-12-2012, 12:44 AM

I am resizing an image using CSS so that always fits within the browser window displaying the image.

The CSS I am using is

Code:

div#sized {	text-align: center; }
div#sized img{	height: 90%; border: none; padding:15px; top: 10%; position: relative }

the HTML is

Code:

<div id="sized"><a href="http://example.com"<img src="someimage.jpg" alt="image text" /></a></div>

It works fine in Safari and Firefox, however will not work on the iPad or iPhone. On those devices it just shows the full sized image not constrained within the DIV.

Does anyone have any idea on a better way to do this within the constraints of plain CSS and HTML ?

Nevet · 06-12-2012, 12:55 AM

You can use max-width to prevent the image from bleeding over the edge of the display area.

Code:

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

fris · 06-12-2012, 06:28 AM

Quote:

Originally Posted by AdultKing

I am resizing an image using CSS so that always fits within the browser window displaying the image.

The CSS I am using is

Code:

div#sized {	text-align: center; }
div#sized img{	height: 90%; border: none; padding:15px; top: 10%; position: relative }

the HTML is

Code:

<div id="sized"><a href="http://example.com"<img src="someimage.jpg" alt="image text" /></a></div>

It works fine in Safari and Firefox, however will not work on the iPad or iPhone. On those devices it just shows the full sized image not constrained within the DIV.

Does anyone have any idea on a better way to do this within the constraints of plain CSS and HTML ?

if its wordpress

http://viewportindustries.com/blog/a...-in-wordpress/

acctman · 06-12-2012, 06:52 AM

photo / image auto resizing is simple...

.photo img { width: 100% }
.photo { width: 40% } // print can be any size you want the default to be and can be applied to a div as a class.

AdultKing · 06-12-2012, 07:21 AM

Thanks for all the replies. I've got it sorted now.

06-12-2012, 12:44 AM	#1
AdultKing Raise Your Weapon Industry Role: Join Date: Jun 2003 Location: Outback Australia Posts: 15,605	CSS Image resize question I am resizing an image using CSS so that always fits within the browser window displaying the image. The CSS I am using is Code: div#sized { text-align: center; } div#sized img{ height: 90%; border: none; padding:15px; top: 10%; position: relative } the HTML is Code: <div id="sized"><a href="http://example.com"<img src="someimage.jpg" alt="image text" /></a></div> It works fine in Safari and Firefox, however will not work on the iPad or iPhone. On those devices it just shows the full sized image not constrained within the DIV. Does anyone have any idea on a better way to do this within the constraints of plain CSS and HTML ? Last edited by AdultKing; 06-12-2012 at 12:45 AM..

06-12-2012, 12:55 AM	#2
Nevet Registered User Industry Role: Join Date: Dec 2011 Posts: 10	You can use max-width to prevent the image from bleeding over the edge of the display area. Code: #sized img { max-width: 100%; }

06-12-2012, 06:52 AM	#4
acctman Confirmed User Join Date: Oct 2003 Location: Atlanta Posts: 2,840	photo / image auto resizing is simple... .photo img { width: 100% } .photo { width: 40% } // print can be any size you want the default to be and can be applied to a div as a class.

06-12-2012, 07:21 AM	#5
AdultKing Raise Your Weapon Industry Role: Join Date: Jun 2003 Location: Outback Australia Posts: 15,605	Thanks for all the replies. I've got it sorted now.