[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?