@#*&^% coding for Apple images

[eggheadbooks1]

I am looking to update my knowledge as I am now working on an update to a book I put out two years ago that has a lot of images of different sizes...

In Apple's Asset Guide they provide the following guidelines for image handling:

HTML:

<div class="image-container">
<img src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

CSS:

img {height: 100%;}
.image-container {height: 100vh;}

However, that code assumes all images are vertical. When I created a container class for a horizontal image—

.image-container2 {width: 100%;}

—and put in a landscape image, the height:100% of the img class countermanded the container code and I ended up with the landscape image ballooned up to 100% of the height of the screen and cropped.

The only way to have both landscape and portrait images in an Apple book, then, was to delete the img class in the CSS and create two different classes that could be applied to the img tag—

.vertical {height:100%;}
.horizon {width:100%;}

—and add that to the code so that vertical images were placed in a vertical container and horizontal images were placed in a horizontal container:

<div class="image-container">
<img class="vertical" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

<div class="image-container2">
<img class="horizon" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

Doing it this way also meant that if I wanted an image smaller than 100% of the screen, I had to create an image class for every size. It was a freakin' nightmare.

So what does everyone do now?

[mmat1]

Hi,

I don't see a reason to define the Size twice, so "image-container" in my books has only "text-align: center;", nothing else.

And, as far as I know, you'll have to define a different class for every size needed, which goes to the <img>-tag

Originally Posted by eggheadbooks1

I am looking to update my knowledge as I am now working on an update to a book I put out two years ago that has a lot of images of different sizes...

In Apple's Asset Guide they provide the following guidelines for image handling:

HTML:

<div class="image-container">
<img src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

CSS:

img {height: 100%;}
.image-container {height: 100vh;}

However, that code assumes all images are vertical. When I created a container class for a horizontal image—

.image-container2 {width: 100%;}

—and put in a landscape image, the height:100% of the img class countermanded the container code and I ended up with the landscape image ballooned up to 100% of the height of the screen and cropped.

The only way to have both landscape and portrait images in an Apple book, then, was to delete the img class in the CSS and create two different classes that could be applied to the img tag—

.vertical {height:100%;}
.horizon {width:100%;}

—and add that to the code so that vertical images were placed in a vertical container and horizontal images were placed in a horizontal container:

<div class="image-container">
<img class="vertical" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

<div class="image-container2">
<img class="horizon" src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

Doing it this way also meant that if I wanted an image smaller than 100% of the screen, I had to create an image class for every size. It was a freakin' nightmare.

So what does everyone do now?

[dgatwood]

For whole-screen content, I tend to use a separate HTML page and SVG. It is pretty much the only approach I'm aware of that will make things work robustly (almost) everywhere.

For smaller images, I'd normally expect them to be shown at actual size, rather than specifying size information, and I normally pick the image size to be something reasonable on an average device screen, and just let it be small on other devices. Whether that works or not for you depends on the layout.

But if you want to do something more complex than that, then yes, you'd pretty much have to have classes for each image size.

[fbrzvnrnd]

Actually I work on a % for portrait and a different % for landscape. I still use the trick to give the % to a div containing the img, and a 100% to the img. Latest iBooks application do not need this, but I still use the trick for retro-support.
I use external SVG except when I need to hyperlink some content inside the SVG, or when I want to interact svg elements with javascript.

[eggheadbooks1]

Originally Posted by dgatwood

...For smaller images, I'd normally expect them to be shown at actual size, rather than specifying size information, and I normally pick the image size to be something reasonable on an average device screen, and just let it be small on other devices. Whether that works or not for you depends on the layout.

But if you want to do something more complex than that, then yes, you'd pretty much have to have classes for each image size.

So what I'm hearing is that the way I did it was correct for my needs, and there is no easier way to do it. And that my thread headline is spot on.