In-Class Content: 4/17/2020

Hi class, this is my in-class exercise from our 4/17/2020 lecture which I covered the use of touch-based media queries and better ways to work with images—especially useful for responsive design.

Recorded lesson on Zoom

Please inspect this page and look at the code to understand what's goin on here

Resize and Crop Images using only CSS

object-fit in CSS allows us to resize, crop, and position an image.

❌without object-fit property

Just setting width and height destroys aspect ratio

✅ with object-fit property 👍

Using the object-fit: cover property to crop and object-position: 0 40% to adjust cropping

Picture tag

In responsive design, we like the picture tag in order to load different images based on screen-size. This is important because we want to load different crops on different devices and also load smaller images when we can, to improve speed of our website. For example, there's no reason to load a giant 2MB 6000px wide image on a tiny 400px wide iPhone screen.

Using the picture tag:

Small image loads (640px × 960px, 64KB) when screen is less than 551px wide: assets/dog-small.jpg
Large image loads (3303px × 4954px, 1MB / 1,000KB) when screen is above 550px wide: assets/dog-large.jpg

The image below is cropped using object-fit: cover and object-position: 0 65% when the screen is > 550px to make a portrait image look better in landscape.

shrink your browser size below 550px to see the image below snap to its original vertical crop and sub in the smaller image file size

Using a CDN to crop, size, and host our images for us

It can be a bit tedious to use a design tool like Photoshop to crop, size, and export different variations of every image we want on our site + custom object-position on every unique image. We can speed that up by using an image optimization tool. We're using Cloudinary.com for this. I explain how to generate our image URLs in our recorded zoom lesson from April 17. Jump to about 1 hour and 7 minutes in.

Using the picture tag:

Small image loads when screen is less than 551px wide: https://res.cloudinary.com/alevinson/image/upload/c_scale,w_800/v1587147567/dog-large_hnpsax.jpg
Large image loads when screen is above 550px wide: https://res.cloudinary.com/alevinson/image/upload/c_fill,g_face,h_600,w_1100,y_0,z_1/v1587147567/dog-large_hnpsax.jpg

Incorporate a @media query to detect touch devices when hovering

Using @media (pointer: coarse) and @media (pointer: fine) we can style only when a device is touch vs. non-touch, respectively, without worrying about screen size

Hover on the image below with a mouse to reveal content on top. On a touch device, you are not able to but we display content above image.

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore deserunt quod expedita nobis ipsam inventore animi nemo distinctio dignissimos dicta, velit, dolores explicabo. Eligendi, incidunt nemo optio omnis porro architecto cupiditate ut vel, amet laborum excepturi enim laudantium aut? Iusto voluptas ipsum dolore eveniet. Voluptas facilis autem adipisci maxime eligendi eos natus eaque, non, dolor aspernatur saepe quam cumque deleniti facere et laborum. Nulla ratione sapiente natus vel, iste, eveniet aperiam, aliquam tempore.