This is a solution to the Article preview component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See the social media share links when they click the share icon
- Solution URL: source code
- Live Site URL: website
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- BEM - CSS Methodology
- CUBE CSS - CSS Methodology
- tailwindcss - CSS framework
- SvelteKit - Svelte Framework
- Before using the
object-fit
CSS property one must explicity specify an intial width and height for theimg
element. - This can be demonstrated as below:
img {
width: 100%;
height: 100%;
object-fit: cover;
}
width
andheight
are to be set as per one's requirement.
- CSS The object-fit Property - This helped me realize that before using the
object fit
CSS property one has to first explicity set an initial width and height.
- Website - Silvanos Eric
- Frontend Mentor - @codexshell
- Twitter - @codexshell