![]() ![]() The fact that Getty provides images via an makes it important that you check that the images continue to work: technically, Getty could push anything they wanted through that iframe window, including ads, or choose to break the image entirely. That’s it: you now have millions of responsive images at your fingers, provided you use them in a way that does not break Getty’s embedded image license. To compensate, we need to add 55 pixels in padding-top to make space for the caption at the bottom: (Add a border to the to see that for yourself). The image will now appear correct, but it’s not sitting quite right in its container. For example, my image is slightly taller than it is wide: To compensate, add a padding-bottom amount using the ratio you determined in Step Two. Add the following styles to the page, adjusting the width as necessary: Keep this ratio in mind: we’ll use it in the next step.ĭetermine how wide you want the image to appear: I would suggest no more than half the width of your main content, to preserve image quality. A square image will have a ratio of 1:1 an image that is twice is wide as it is tall will have a ratio of 1:2. ĭetermine the image’s aspect ratio: the division of the image’s height by its width. Note the class that is added to the wrapping. Add http before the URL for the image, which will allow it to appear when you test the page locally. Remove the width and height attributes from the. We’re about to change that in four steps, borrowing a technique used to make YouTube videos fluid: As it stands, the will render the image at a fixed width. As you can see, the images provided are not yet high resolution, averaging around 420 pixels wide: good for illustration in body text, but not banner images.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |