View Full Version : css to make all images larger?


1611mac
03-23-2012, 03:14 PM
Is there a css method I can use to make all photos in an ePub bigger (say 20% bigger)?

The pics DO NOT have a HEIGHT or WIDTH attrib in the xhtml.

mmat1
03-24-2012, 02:11 PM
Is there a css method I can use to make all photos in an ePub bigger (say 20% bigger)?

The pics DO NOT have a HEIGHT or WIDTH attrib in the xhtml.

Have you ever tried
img.i500 { height: 500px; }

where i500 is used with a picture of an original height of 400px ( to get roughly your 120% ) ?

Btw. I don't know how to enlarge a picture by a percentage, this seems to be always calculated from "usable space".

Maybe with SVG it is possible. Search the forum for "<svg", there should be lots of samples.

1611mac
03-24-2012, 02:55 PM
Thanks for the reply. As mentioned, the pics don't currently have a height or width attrib. and I don't want to calculate and put on every img. (The book has 101 images.) I was hoping for some type of simple "global" method.

As a "cheat" right now I'm specifying an IMG min-width which at least ensures that every image is at least a "set minimum size".

mmat1
03-24-2012, 05:06 PM
As a "cheat" right now I'm specifying an IMG min-width which at least ensures that every image is at least a "set minimum size".

Yes, this seams to be a good workaround if the Pictures are quite similar in size.

Since nobody ad disagreed, there's probably no "percentage-feature" in css...

1611mac
03-24-2012, 05:19 PM
Yes, this seams to be a good workaround if the Pictures are quite similar in size.

Since nobody ad disagreed, there's probably no "percentage-feature" in css...

There is a percentage but it's relative to screen size (I think) and not pic size. In the css I gave a "min-width" of 120% and pic was bigger than the screen. A "min-width" of 25% ensures the images will at least be 25% of the screen width.

JSWolf
03-31-2012, 02:18 AM
You would be best to use Photoshop to enlarge your images and then set it so the images scale such that they do not go beyond the screen as different devices have different resolution and you don't want the images to look good on an iPad yet go off the screen on an iPhone or T1.