CSS Tips - Practical img Element Defaults

Рет қаралды 2,125

Күн бұрын

A line-by-line guide through the sensible CSS for image elements you should apply in all your projects to make your img elements bulletproof by default.
All credit goes to Harry Roberts, who originally shared this technique on Twitter.
Harry's Tweet: / 1717841334462005661
CodePen Demo: codepen.io/ZoranJambor/pen/Jj...
Follow Harry Roberts:
✍️ Blog: csswizardry.com/
🐦 Twitter: / csswizardry
Get CSS Stickers Pack:
🔖 stickers.css-weekly.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Course Mastering Prettier & Stylelint
🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com/
🏷️ Use coupon code KZfaq25 to get an additional 25% off on the already discounted pre-launch price.
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
📖 Chapters
00:00 Why you should use this technique
00:49 Demo setup
01:12 Fix distorted images
02:14 Fix empty space under images
03:02 Style alt text
03:59 Style low-quality image placeholders (LQIP)
05:07 Add margin for shape-outside
- Zoran Jambor
#css #cssbasics

Пікірлер: 29

@csswizardry 6 ай бұрын

This is such a perfect, succinct breakdown. Thanks for doing it justice, dude!

@CSSWeekly 6 ай бұрын

I'm thrilled to hear this; thank you so much, Harry! 🙂 And thank you for sharing this in the first place! 🙏

@bushigi5913 7 ай бұрын

shape-margin? Wow that's new to me! Thank you, Zoran and Harry.

@CSSWeekly 7 ай бұрын

You're more than welcome, Lin! I'm glad you learned something. Thanks for watching and commenting! 🙂

@D7460N Ай бұрын

This perfect! Thank you!

@CSSWeekly Ай бұрын

You're very welcome! 🙂

@CeeTheJay 6 ай бұрын

Another super-helpful video. Cheers, Zoran

@CSSWeekly 6 ай бұрын

Thank you so much, Christopher! I’m glad you found it helpful! 🙂

@michaelgainford 7 ай бұрын

Amazing tips here. Keep up the great work 🔥

@CSSWeekly 7 ай бұрын

Thank you so much, Michael! I will! 🙏

@Noam-Bahar 7 ай бұрын

Awesome!!! Will definitely use these 🚀

@CSSWeekly 7 ай бұрын

I'm thrilled to hear this, Noam! Thank you! 🙏

@markovujanic 6 ай бұрын

this is such a perfect video

@CSSWeekly 6 ай бұрын

Thank you so much, Marko! I'm delighted to hear you think this! 🙂

@Killyspudful 7 ай бұрын

Thank you as ever, man

@CSSWeekly 7 ай бұрын

Thank you, my friend! 😊

@ahmad-murery 7 ай бұрын

That vertical-align trick me before, I don't believe the fix was that simple, easier than setting (display: block; margin: auto;) The shape-margin property is really nice. Thanks Zoran!

@CSSWeekly 7 ай бұрын

As always, thank you so much, Ahmad! I'm glad that you got something out of it! 🙂

@emin-altan 7 ай бұрын

Thanks bro 😊

@CSSWeekly 7 ай бұрын

Thank you, Emin, for watching and commenting! 🙏

@HuynhLuong227 7 ай бұрын

thanks and respect you, keep going

@CSSWeekly 7 ай бұрын

Thank you for watching and commenting, Huynh! 🙏

@HuynhLuong227 7 ай бұрын

@@CSSWeekly nice to meet you, wait next tutorial

@CSSWeekly 7 ай бұрын

Nice to meet you too, Huynh, and welcome to the CSS Weekly tribe! ❤️

@ThomasLuzat 6 ай бұрын

Even though I still use it often, I always feel that "max-width: 100%;" for images is a hack, because the image resolution should most often not affect the layout. If it's 20px too small, it's still better to upscale it and keep the layout correct. If it was a symbol/icon/whatever, it should probably have been given its own explicit width anyway. So, why aren't we seeing "width: 100%" instead more often?

@CSSWeekly 6 ай бұрын

Thanks for your insight, Thomas. It makes sense, but I can't entirely agree with this. 🙂 I think that upscaled images look bad and make the website feel subpar or cheap. I would rather have an image that does not fill the entirety of the container when it has to than upscale it. Not all images need to stretch to 100% of the container's width; some might be floated, some might be absolutely positioned, and so on, in which case "width: 100%;" will be a problem, while for all of those, it still applies that you generally don't want to upscale them because they'll look blurry. But, of course, if your typical use-case "width: 100%;" makes more sense, there's no reason not to use that instead. 🙂

@webdeveloper4742 6 ай бұрын

Here's me working in construction wasting my energy. I Started learning code 15years ago and last year I built my own website from html and css. My website outranks all my competitors as I learned from up to-date code and best practces. The new year I will lauch my wed developers company and make my life better instead of damaging my body in labour intensive construction. My ambition will be to keep my company going as it earns money in construction and employ web developers to expant my new business. All I see Is a lot of wordpress fakers making it in an industry. I can out perform these easily with my skills.

@CSSWeekly 6 ай бұрын

It's great to hear you've been learning to code while working a difficult labor-intensive job. That's impressive! 👏 I wish you the best of luck with your new webdev business! 🙂

@CSSWeekly 6 ай бұрын

There is really no need for this kind of snarky comment here. 😔 Switching careers is a monumental task, and if somebody is just paying attention or learning out of curiosity for years before actually building something, that effort should be applauded. You can not know what obstacles or challenges people face on their (web development) journeys, but everybody deserves to be treated with respect and kindness. 🙂