Width/Height of an IMAGE intact in a responsive page
does anyone know how to keep the original Width/Height of an IMAGE intact in a responsive page --I need some CSS example .or give an example .. please . -awk
18 Replies
object-fit: cover;
If you can provide what you have tried, people can help you better. Instead of asking for an example give us one you have tried to help fix.
https://pen.newthank you .. I am in USA and my site is only accepting IP address from USA.. here is URL : https://dallasmart.com/index_new1.php.. if you are not in US , you might not be able to get to the site ..
May I ask why you block outside IP addresses that is really not inclusive xD
What if I'm on a VPN or outside on vacation
what if your block script sux?
Also its best you isolate issues and make minimal demos of your code issues. Lots of times that helps us and you figure it out faster.
hackers .. I have been hacked many times ..
I mean ... there are better ways š
ok . I am all ears.. what better ways ?
if you pass me your IP address , I will include you in and you will see the pages ....yes?
I'm in the US xD
ahh , awesome ..finally ...
Well for one block the urls to the vulnerabilities. What kinda of platform are you using? we are getting way off topic of your post though. Probably best if you made a new one in regards to hosting security in #os-and-tools.
I didn't say I'd look at it, rather debug a minimal demo xD
For one I wouldn't know what I'm looking for really like which images? All images?
Also if you didn't know its best to serve up the proper img for the proper DPI/Viewport so you don't have mobile users downloading a 2900px photo when all they needed was a 300px one
You do this by using
srcset
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
A common "reset/default" I use is but then also try to get the proper size for the proper component/viewport size.
but if it was to squish it would "crop" the img vs distorting it. And still fill its container.
Hope that helps, if not consider what I said and create a minimal demo to help you understand more. https://pen.newthank you , mate .. you have helped .. -awk
oh side note the
<img> container/parent would need overflow: hidden; for it to properly cover?
I better double check that for some reason I have doubt
š
no ok right you could also use overflow: hidden; on a img container though to kinda crop it too ig.it needs a height it was it is. Reminds me I should make a more clear demo with the gotchas ig.
let me give it a go .. you have some good suggestions ..
you can play with the commented CSS though and maybe get an idea
awesome gl! boost this post by replying if you have more issues (don't make a new post regarding the same issue so others can see what has been said)
are you using a network device to do geoip filtering, or just a check in PHP?
cause if you're just checking in PHP, that's not really going to do anything against a proper hacking attempt
I mean depending what what they are using its simple as cleaning up old configs and or changing the common paths for them.
I do that first thing say with WP and I've never really been hacked.
Had stupid hosting SQL space issues more than hackers š¤£
morning , I use geoIP filtering ..I get the city where the IP is coming from and if the city is not a US city , then I will deny access .. ..