Could you be a little more specific? Perhaps point us to a particularly good example of this distortion? I’m betting that it’s actually a CSS issue but we’d need to check to be sure.
Thread Starter
ajetal
(@ajetal)
The header image is never a problem.
The non-header images on the following pages have appeared distorted on some computers: Welcome, Parts, Service.
Conversely, the images on the About Us page never seem to be distorted.
If you look at these pages and see no distortion, then would I be correct to assume the problem lies with the computers on which the distortion appears, such as old browser versions, etc? I suspect that the people reporting the distortion may not update software very often.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you post a screenshot of the distortion? We don’t know what to look for.
Thread Starter
ajetal
(@ajetal)
Here are two shots, first showing the distortion and second that is normal:
Distorted
Normal
Not sure this was the most efficient way to link to photos, but if it works…..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Whoa! I think I notice the distortion.
Do you know which browser & browser versions the issue occurs in?
Thread Starter
ajetal
(@ajetal)
That screenshot is from IE 8.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I don’t have IE 8 neither, but I did try to replicate the issue using IE9’s compatibility modes. I couldn’t replicate the issue, but those compatibility modes aren’t that trustworthy.
As well as not seeing the issue, I can’t spot problematic code in your markup or the styles applied to your image.
I would recommend you try disabling plugins to explore whether any could be responsible and add this CSS;
#branding img {
height: 100%;
}
That CSS will expand your image height to about 30 pixels taller, to the height of your actual image dimensions, but let’s test to see whether it improves the issue.
Thread Starter
ajetal
(@ajetal)
Tried adding he code above to no avail and…
After working on this issue a few days, I’m going to try delineating the problem again. Still no resolution for me…..I’m a newbie so it may be something obvious that I just don’t know….maybe….
I’m building a website using a monitor set at 1680 x 1024 resolution. Images look fine. When I change to a lower resolution, to emulate what my friend is seeing, say 1050 x 768, the images appear to be squashed technical term) vertically. As the aspect ratio of the monitor changes, so does the aspect ratio of the image.
Is this just the way it is or is there a fix? Can the same image “look right” at two different monitor resolutions?
Thread Starter
ajetal
(@ajetal)
Tried adding he code above to no avail and…
After working on this issue a few days, I’m going to try delineating the problem again. Still no resolution for me…..I’m a newbie so it may be something obvious that I just don’t know….maybe….
I’m building a website using a monitor set at 1680 x 1024 resolution. Images look fine. When I change to a lower resolution, to emulate what my friend is seeing, say 1050 x 768, the images appear to be squashed (technical term) vertically. As the aspect ratio of the monitor changes, so does the aspect ratio of the image.
Is this just the way it is or is there a fix? Can the same image “look right” at two different monitor resolutions?
My Site
Thread Starter
ajetal
(@ajetal)
Sorry for the double post…
