I am facing a strange problem. The images that are in my website stretch out a bit when i view in firefox. But the same images are perfect when viewed in IE. For this, the text that i have written on the images are not clean when viewed in firefox.Can anybody point out the problem.:(

Also, when i was designing the site in localhost...everything seemed fine. The problem started after i uploaded it in the www server

Dani AI

Generated

As noted, the problem appeared only after uploading and only in Firefox. That pattern most often falls into two buckets: the image file changed during upload or server processing, or the page is forcing a size that Firefox interpolates differently than IE. Both are easy to verify with a few targeted checks.

Useful checks that diagnose the root cause are: open the image itself in a new tab in Firefox and in IE to see if the file looks correct; compare the server copy filesize to the local copy (FTP/SSH or file manager); inspect the image response headers in the Network panel (Content-Type, Content-Length); and use the Inspector/Computed panel to see the rendered width/height versus the image’s naturalWidth/naturalHeight (queryable from the console). If the server copy is smaller or corrupted, re-upload in binary mode or use SFTP. If the image is being scaled by CSS or HTML width/height attributes, let the browser preserve aspect ratio.

A small CSS rule that prevents unintended stretching:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Avoid specifying both width and height attributes unless they match the image pixels. For images that include text, serve them at the final display size (or use SVG/CSS text) to keep text sharp. As offered to inspect the live site, opening the image directly and checking file size/headers usually reveals whether the issue was upload/server-side or a client-side scaling problem.

Member Avatar for Member #406068

Do you have a url for it? I can take a look.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.