I am not a css expert, but it appears that the img tag style sets the “min-width: 460px”. When you change the user agent width to less than 640px, the image is resized and “squashed” as you stated. I think if you were to set the min-width: to something around 640px, your image would not get “squashed”.
Hi jc32, Thanks for the reply. I tried this previously, but the header then extends beyond the navigation bar below a certain width (around 770px). I’ve changed it so you can see what’s happening…
http://www.razorweb.co.uk
Marcus,
I was thinking you could likely use 2 images, and have css select the appropriate image based on width. You could then generate an image for smaller devices that would fit your requirements. I know this would be a lot of work, but it may work. The steps would include:
Here is a link that discusses the topic.
Thanks jc32, I appreciate the reply. Looks like an excellent solution. I’ll definitely be using that information in the future – in the meantime, all is now working fine. Big thanks again for the reply.
