Hi I use this code to show images ( image name from database ) <img src=â€image1.jpg†width=250 height=250> Code (markup): With this code, if the image size is 250 * 200 it will be scratched to fit the square. What is the solution? thanks
The reason that it is stretching is because the browser is forcing the image to be the size that you have provided which is 250 by 250. You can either remove the height and width and let it be auto. One solution that I have found when this happened to me and couldn't set the graphics to auto was to modify the images. For images that were too small I put them in Photoshop and added a background to the image the same color as the background of my site. This would in your case add 50px to the height. 25px on each side is the best to make it even. Then save the file and put it in. Since the image is now the size that you have provided in your code, it will no longer automatically stretch.
You can specify maximum widths or heights by leaving one out and it will maintain the aspect ratio. Example: <img src=â€image1.jpg†width=250> Code (markup): This will allow a maximum width of 250 and the height will adjust proportionately.