Let's use Aspect ratio with Tailwind - @tailwindcss/aspect-ratio
Aspect Ratio CSS / Tailwind / React / Gatsby
“Wherever you go, go with all your heart.”— Confucius.
I wholeheartedly [no pun intended] have taken this approach throughout my adventure as a UI developer — and of course, as a proud father of two. Since June 2020, I’ve been working as a frontend developer at Artlist while taking on side projects building websites for small businesses and entrepreneurs.
Whether it’s on the frontend or in the user experience, the centerpiece of my career has been materializing my client’s vision on the “big screen.” Essentially, what they see in color, I bring to life in code.
Like that serial entrepreneur who’s firing off ideas by the millisecond? I capture those light bulbs and translate them into a functional and responsive website. The ragamuffin agencies and artists that leave the proverbial “harbor” to push past their boundaries? I join them in that journey by building bold, creative outlets for them to share their “why” to the world.
Ultimately, I’m looking for a home to employ all my collective experiences as a UX Engineer and UI Developer on a full-time basis. If you think we’d be a good fit, feel free to reach out to me at itay1313@gmail.com
For a snapshot of past projects and side hustles check out my portfolio(s)👇👇 https://com-mando.com https://behance.net/itayha https://codepen.io/itayko
My [Arts &] Craft:
HTML/ PUG CSS/SCSS Javascript/ ES6 Vanilla JS/ Jquery Design systems Git WebGL/ Three.js WordPress/ Weblow Angular/ React Figma/Photoshop/Illustrator/XD/ AE
Hi, I need to create a widget with 3 different sizes, horizontal, vertical, square. So let's do this together. If you have any cool ideas, please share them in the comment section.
The @tailwindcss/aspect-ratio plugin adds aspect-w-{n} and aspect-h-{n} classes that can be combined to give an element a fixed aspect ratio.
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
checkout: https://tailwindcss.com/docs/plugins#aspect-ratio https://github.com/tailwindlabs/tailwindcss-aspect-ratio
So let's go. First, install:
yarn add @tailwindcss/aspect-ratio
or
npm install yarn add @tailwindcss/aspect-ratio
go to tailwind.config.js add
require("@tailwindcss/aspect-ratio")
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/aspect-ratio'),
]
}
done. We can now play with the images. with:
aspect-w-{x}
aspect-h-{x}
Wrap your with a div, it's important to know aspect-ratio: width / height; using CSS this is using (the old padding-bottom trick ) you need to assign the aspect ratio to a parent element, and make the actual element you are trying to size the only child of that parent.
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Horizontal / Landscape
<div className="aspect-w-16 aspect-h-9">
<Horizontal />
</div>
to get 16/9 Horizontal done.
Square: For the square we need to make something like the following:
aspect-ratio: 1 / 1;
<div className="aspect-w-1 aspect-h-1">
<Sqaure />
</div>
- vertical/ Portrait
<div className="aspect-w-9 aspect-h-16">
<Horizontal />
</div>
It's a flex-wrap, see ya, @itaycode
