GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS Image resize question (https://gfy.com/showthread.php?t=1071147)

AdultKing

06-12-2012 12:44 AM

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 ?

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 (Post 18999899)

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>

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.

All times are GMT -7. The time now is 12:27 PM.