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
b1mind
b1mindā€¢15mo ago
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.new
awk0256
awk0256ā€¢15mo ago
thank 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 ..
b1mind
b1mindā€¢15mo ago
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.
awk0256
awk0256ā€¢15mo ago
hackers .. I have been hacked many times ..
b1mind
b1mindā€¢15mo ago
I mean ... there are better ways šŸ˜„
awk0256
awk0256ā€¢15mo ago
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?
b1mind
b1mindā€¢15mo ago
I'm in the US xD
awk0256
awk0256ā€¢15mo ago
ahh , awesome ..finally ...
b1mind
b1mindā€¢15mo ago
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
img {
display: block;
max-width: 100%;
object-fit: cover;
}
img {
display: block;
max-width: 100%;
object-fit: cover;
}
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.new
awk0256
awk0256ā€¢15mo ago
thank you , mate .. you have helped .. -awk
b1mind
b1mindā€¢15mo ago
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.
b1mind
b1mindā€¢15mo ago
it needs a height it was it is. Reminds me I should make a more clear demo with the gotchas ig.
awk0256
awk0256ā€¢15mo ago
let me give it a go .. you have some good suggestions ..
b1mind
b1mindā€¢15mo ago
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)
Jochem
Jochemā€¢15mo ago
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
b1mind
b1mindā€¢15mo ago
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 šŸ¤£
awk0256
awk0256ā€¢15mo ago
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 .. ..
Want results from more Discord servers?
Add your server