simona6 Posted October 22, 2024 Share Posted October 22, 2024 We have website where hovering over the Product photo reveals the full size image, so it kind of "zooms". Trouble is, many old photos are smaller than the container. Is there a way in CSS to set the minimum size to say 600x600px... even if it stretches it... but when you get an image that is BIG... is still shows the full size? Quote Link to comment https://forums.phpfreaks.com/topic/325139-can-you-set-a-minimum-height-and-width-of-a-background-image/ Share on other sites More sharing options...
gizmola Posted October 22, 2024 Share Posted October 22, 2024 Css has background-size where 'cover' or possibly 'auto' should do what you want, although it will honor the original aspect ratio, which will result in some cropping if the aspect ratio differs. Usually people don't use square pictures. Quote Link to comment https://forums.phpfreaks.com/topic/325139-can-you-set-a-minimum-height-and-width-of-a-background-image/#findComment-1638527 Share on other sites More sharing options...
maxxd Posted October 22, 2024 Share Posted October 22, 2024 Don't forget you'll be sacrificing image quality if you upscale the images. This might not be an issue, but every b2c catalog site I've built has wanted good, crisp photos of their products. Quote Link to comment https://forums.phpfreaks.com/topic/325139-can-you-set-a-minimum-height-and-width-of-a-background-image/#findComment-1638531 Share on other sites More sharing options...
simona6 Posted October 23, 2024 Author Share Posted October 23, 2024 Cover won't work. The website uses a Zoom classed DIV to show the "full size" image when you hover over it. If we did Cover, it would simply show it to "fill the box". The idea is when you zoom over, as it is the original image, it's like running a Mag glass over it. But we want to set a Min Width/Height, so if the image is too small, it will stretch it (don't care about quality). Possible? Quote Link to comment https://forums.phpfreaks.com/topic/325139-can-you-set-a-minimum-height-and-width-of-a-background-image/#findComment-1638566 Share on other sites More sharing options...
gizmola Posted February 22 Share Posted February 22 Anything can be done if you want to resort to javascript. Quote Link to comment https://forums.phpfreaks.com/topic/325139-can-you-set-a-minimum-height-and-width-of-a-background-image/#findComment-1650297 Share on other sites More sharing options...
jodunno Posted February 25 Share Posted February 25 regarding background-size: i wonder if actually specifying a size is not working? if i understand you correctly, you want to force a background image to fit into its container, yes? I made a crop of a photo of mine depicting the female genitalia of Phaonia rufipalpis. I will attach the crop for testing my code. I use background-size to make it fit the container. Is this not what you want? <!DOCTYPE html> <html> <head> <title>CSS background-size</title> <style> div.container { display: block; margin: 0 auto; padding: 0px; width: 400px; height: 400px; border: solid 1px #000000; background-image: url('s263x200.jpg'); background-repeat: no-repeat; /* background-size: 400px 400px; */ background-size: 100% 100%; } div.text { position: relative; top: 93%; padding: 5px; background: rgb(0,0,0,0.2); color: #ffffff; text-align: center; } </style> </head> <body> <div class="container"> <div class="text">background-size: 100% 100%;</div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/325139-can-you-set-a-minimum-height-and-width-of-a-background-image/#findComment-1650492 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.