![html iframe code crop html iframe code crop](https://i.ytimg.com/vi/H4WVpJkwj40/maxresdefault.jpg)
But despite the cropping challenges, managing a single crop per article can eliminate a number of headaches & save a lot of time in the long run. And in certain situations, we might decide to left- or right-align an image within the parent div.
![html iframe code crop html iframe code crop](https://i.ytimg.com/vi/XfgMQk8lhJg/maxresdefault.jpg)
In these situations, we'll create a PSD with overlays for all of the different uses, which helps us foresee potential cropping issues. Of course, using cropping images in browser can produce unexpected results, crop-wise, so some foresight is required with the original crop, oftentimes meaning positioning crucial content in the center of the image. We can use a single image for all 3 uses, allowing Webflow's responsive image support to display a pre-resized image closest to the display size. This becomes especially convenient when you have, for instance, a photo associated with an article that needs to be displayed at 21x9 as a hero graphic, as a 1x1 square in a related content area, & as a 4x3 graphic on the news page. It's not yet supported by Webflow natively, but with a single line of code, we can enable a host of features that will allow for flexibility in displaying images.Īmong its benefits, Object Fit is useful for 1) defining an image's aspect ratio according to its parent div, 2) adjusting these aspect ratios across different viewports, 3) cropping an image omni-directionally according to its parent div's flex or grid properties, & 4) displaying a single image at multiple aspect ratios according to different use cases. Object-fit, on the other hand, offers the best of both worlds: the display flexibility of background-size & the feature set of an IMG element. In short, background-size leaves a number of boxes unticked. Nor are they ideal for load times, bypassing Webflow's built-in SRCSET responsive image support, which delivers optimized images according to the user's device. Background images aren't ideal for accessibility, lacking alt text support. Replacing images requires digging into the styles. Using CSS to reference an image requires creating a class for each image, which can become difficult to manage longterm. But this approach to image display has its drawbacks, too. What if I told you images could be cropped by their parent DIV omni-directionally, behaving like background-size: cover, but retaining the feature set of an IMG element? There's object-fit for that.īackground-size can be a godsend for responsive image display, with omnidirectional cropping & a range of positioning controls making a design look polished & considered.