![]() If you provide a width and leave the media condition off, then it will be treated as the default width that will be used if nothing else matches. The last item on your list does not need to have a media condition. For example, calc(50vw - 2rem) says the image will be 50 percent of the viewport width, minus 2rem, perhaps to account for some padding or border. You can even use calc for more complex situations. You can also use relative widths, such as 50vw which says the image will be 50 percent of the viewport width. Each item in the list looks like this: “ (min-width: 1023px) 780px,” which would tell the browser that when the viewport is 1023 pixels wide (or wider), the image will be exactly 780 pixels wide. The sizes attribute is a comma-separated list of media conditions Footnote Not sure what image sizes to provide? See below! All you have to do is provide a good set of images, and the browser will do the rest. So you don’t have to worry about 1x and 2x assets. It will also know that if the image will be displayed at 320 pixels wide on a retina screen, it should choose an asset that is at least 640 pixels wide. It’s smart enough to know that on a low-resolution desktop screen if the image will be displayed at 800 pixels wide, it should choose an asset from the list that is at least 800 pixels wide. The browser will choose the best image based on a complex set of criteria including what size the image is displayed to the user at their current viewport size, and whether the user has a high-resolution display or not. Each item in the list looks like this: “ image.jpg 1000w,” which tells the browser that the file image.jpg is 1000 pixels wide.īy providing a collection of image assets in this way, you’re saying to the browser: “I’m giving you a list of images and I trust you to pick the best one.” It’s a comma-separated list of URLs paired with widths. Oh, and don’t worry about browser support! Not only do these attributes have excellent support across the board, we’ll also be providing a fallback for older browsers like IE11. We’ll use the srcset attribute to provide a list of image assets to choose from, and the sizes attribute to tell the browser how large the image will display at various breakpoints. Thankfully, the browser is better equipped than we are to handle this logic. It involves determining how large the image will be displayed, as well as understanding whether the user is on a high-resolution display, among other things. ![]() The logic behind displaying an image responsively is complicated. We call this resolution switching, and you can accomplish it using the srcset and sizes attributes. The responsive images spec is fantastic and covers a lot of use cases, but in my experience, most of the time you’ll only need to understand one of them: Serving a different sized copy of the same image depending on the user’s viewport width. This image is based on a tweet by Harry Roberts ![]() The relevant corresponding CSS would be the following, where padding-bottom is one weird trick that is used to set a 16:9 ratio on the div containing the image. Liquorice candy macaroon soufflé jelly cake. An aria-label is encouraged to take the place of the alt attribute that would normally be present on a regular img tag. So using the example of templated cards, here's how you might set up using the background-size: cover solution.įirst, the HTML, where the image is inserted into the style attribute as a background-image. ![]() Let's look at how to use each solution, and learn when to select one over the other.Ī decade of my background was creating highly customized WordPress themes and plugins for enterprise websites. The alternative method makes use of the standard img tag, and uses the magic of: object-fit : cover I used this plugin on ~30 sites prior to the following property becoming more supported (aka IE < 9 dropping in total market share): background-size : cover Īccording to, this property and value have been well supported for over 9 years! But websites that are intertwined with using Backstretch or another homegrown solution may not yet have updated. In the not to distant past when jQuery was King of the Mountain and CSS3 was still worth being designated as such, the most popular tool for responsive background images was the Backstretch jQuery plugin. This is episode #3 in a series examining modern CSS solutions to problems Stephanie Eckles has been solving over the last 14+ years as a front-end dev.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |