class: middle center # ~ Responsive Images ~ --- class: middle In addition to using `media queries` to make our designs responsive, we can also apply responsive techniques to the content of our pages. In particular this can be really useful with images. --- class: middle #### The `srcset` property One way we can do this is with `srcset`. ```html
``` --- class: middle `srcset` is really only designed for changing between sizes of same image.. what if we wanted to change the contents of the image based on the browser size? --- class: middle The `
` element is precisely for that purpose. Just like the `video` and `audio` tags, the `picture` tag can be provided multiple sources with a `media` specification for when to show that particular version. ```html
``` --- class: middle #### Fitting images within flexible containers You'll often find the need to resize images to fit within varying sized elements in your design. While it's still best to crop and resize images to fit your particular needs, there's a CSS method to help scale images to fit. --- class: middle #### The `object-fit` css property With css `object-fit`, we have several options for fitting an image into dimensions that don't fit the images. --- class: middle ```html
``` ```css .image-one { width: 200px; height: 200px; } .image-two { width: 200px; height: 200px; object-fit: cover; } ```
.footnote[if you encounter errors with your images not scaling right in chrome, you might need to [remove EXIF data from your images](https://stackoverflow.com/questions/62825499/is-object-fit-breaking-some-image-aspect-ratios-in-chrome)] --- class: middle We can also specify where the clipping happens with the `object-position` property: ```css .image-one { width: 350px; height: 200px; } .image-two { width: 350px; height: 200px; object-fit: cover; object-position: center; } ```
--- class: middle center [Demo using `object-fit`, `object-position`, and the `picture` tag](demo.html)