eclipsa
faerie sightings
Oh hey, it's me, again, here to drop some wisdom about those borders on pictures. You know the ones I mean, right? No? Well, let me just show you the thing.
It's displeasing aesthetically, right?? Yeah, I agree. So, I'm here to tell you a tip that's super easy to do to fix this issue! Now the normal way of inserting an image that you're resizing is like so:
<img src="blahblahurl" style="width: #px; height: #px; etc;">
Which is fine, if you don't mind having that border around it. My tip? Do it like so:
<div style="background-image: url('blahblahurl'); background-size: 100% 100%; width: #px; height: #px; etc">
It's not a whole lot of extra work, and if you do it like this there's no worries on that border showing up and disrupting your image. Make sure to use the background-size: 100% 100% like I did, or it might distort your image/repeat it. You can even use % widths for this, just like you would any other div; or viewport width (i.e. 10vw). I hope this helps! It's pretty simple, and you don't have to worry about the image popping up when it's clicked on either -- I know a lot of people didn't want that to happen -- and if you wanted to put text over the image, it's totally possible as long as you didn't close the div first.
Hope this helped you! It's super quick, so if you have any questions, don't hesitate to ask them!
-Coley
View full tutorial
It's displeasing aesthetically, right?? Yeah, I agree. So, I'm here to tell you a tip that's super easy to do to fix this issue! Now the normal way of inserting an image that you're resizing is like so:
<img src="blahblahurl" style="width: #px; height: #px; etc;">
Which is fine, if you don't mind having that border around it. My tip? Do it like so:
<div style="background-image: url('blahblahurl'); background-size: 100% 100%; width: #px; height: #px; etc">
It's not a whole lot of extra work, and if you do it like this there's no worries on that border showing up and disrupting your image. Make sure to use the background-size: 100% 100% like I did, or it might distort your image/repeat it. You can even use % widths for this, just like you would any other div; or viewport width (i.e. 10vw). I hope this helps! It's pretty simple, and you don't have to worry about the image popping up when it's clicked on either -- I know a lot of people didn't want that to happen -- and if you wanted to put text over the image, it's totally possible as long as you didn't close the div first.
Hope this helped you! It's super quick, so if you have any questions, don't hesitate to ask them!
-Coley
View full tutorial