# object fit

Published articles for object fit.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Aligning Logo Images in CSS

DevFeed: [Aligning Logo Images in CSS](<https://devfeed.tech/articles/aligning-logo-images-in-css-45249.md>)

Original publisher: [Read original article](<https://ishadeed.com/article/aligning-logos-css/>)

Author: Ahmad Shadeed

Published: 2020-06-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Ahmad Shadeed](<https://devfeed.tech/sources/ahmad-shadeed.md>)

Topics: [Front end](<https://devfeed.tech/topics/frontend.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Sketch](<https://devfeed.tech/topics/sketch.md>)

Tags: [alignment](<https://devfeed.tech/tags/alignment.md>), [centering](<https://devfeed.tech/tags/centering.md>), [css](<https://devfeed.tech/tags/css.md>), [css-grid](<https://devfeed.tech/tags/css-grid.md>), [design](<https://devfeed.tech/tags/design.md>), [designer](<https://devfeed.tech/tags/designer.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [images](<https://devfeed.tech/tags/images.md>), [logos](<https://devfeed.tech/tags/logos.md>), [logos-grid](<https://devfeed.tech/tags/logos-grid.md>), [object-fit](<https://devfeed.tech/tags/object-fit.md>)

### AI overview

A front-end tutorial on designing and implementing logo sections. It explains how to resize, align, center, and space logos of different shapes and sizes in Sketch before implementing the layout with HTML and CSS.

### Source excerpt

As a front-end developer, you may have worked on making a section that contains logos for brands, clients, companies, you name it. That task can seem simple at first, but it brings some challenges a long with it that are related to the alignment and centering of those logos. Adding on that, some logos look horizontal and some are more vertical, let alone the different image sizes for each one.

## Image comparison slider with pure CSS

DevFeed: [Image comparison slider with pure CSS](<https://devfeed.tech/articles/image-comparison-slider-with-pure-css-52083.md>)

Original publisher: [Read original article](<https://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/>)

Author: Lea Verou

Published: 2014-07-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [image slider](<https://devfeed.tech/topics/image-slider.md>), [Web Accessibility (a11y)](<https://devfeed.tech/topics/web-accessibility.md>), [HTML](<https://devfeed.tech/topics/html.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [blog](<https://devfeed.tech/tags/blog.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [image-slider](<https://devfeed.tech/tags/image-slider.md>), [object-fit](<https://devfeed.tech/tags/object-fit.md>), [replies](<https://devfeed.tech/tags/replies.md>), [tips](<https://devfeed.tech/tags/tips.md>), [webkit](<https://devfeed.tech/tags/webkit.md>)

### AI overview

A CSS technique creates an image comparison slider by overlaying images and using the resize property, avoiding JavaScript and reducing CSS. The article also discusses semantic markup, keyboard accessibility limitations, dragging constraints, and mobile support issues.

### Source excerpt

As a few of you know, I have been spending a good part of this year writing a book for O'Reilly called "CSS Secrets" (preorder here!). I wanted to include a "secret" about the various uses of the resize property, as it's one of my favorite underdogs, since it rarely gets any love. However, just mentioning the typical use case of improving the UX of text fields didn't feel like enough of a secret at all. The whole purpose of the book is to get authors to think outside the box about what's possible with CSS, not to recite widely known applications of CSS features. So I started brainstorming: What else could we do with it? Then I remembered Dudley's awesome Before/After image slider from a while ago. While I loved the result, the markup isn't great and it requires scripting. Also, both images are CSS backgrounds, so for a screen reader, there are no images there. And then it dawned on me: What if I overlaid a <div> on an image and made it horizontally resizable through the resize property? I tried it, and as you can see below, it worked! The good parts: More semantic markup (2 images & 2 divs). If object-fit was widely supported, it could even be just one div and two images. No JS Less CSS code Of course, few things come with no drawbacks. In this case: One big drawback is keyboard accessibility. Dudley's demo uses a range input, so it's keyboard accessible by design. You can only drag from the bottom right corners. In Dudley's demo, you can click at any point in the slider. And yes, I did try to style ::webkit-resizer and increase its size so that at least it has smoother UX in Webkit. However, no matter what I tried, nothing seemed to work. Also, none of the two seems to work on mobile. It might not be perfect, but I thought it's a pretty cool demo of what's possible with the resize property, as everybody seems to only use it in textareas and the like, but its potential is much bigger. And now if you'll excuse me, I have a chapter to write ;) Edit: It looks like some