当我将它们保存为.HTML文件时，我的PrettyPhoto图像会变形。

Question

My prettyPhoto images get distorted when I save them as an .HTML File. When I save the page as .html or .htm the images become distorted, when I save the page as .php the PrettyPhoto images are fine.

Here's what happens.. http://Handyman-Services.NYC/NYC-Handyman-Services.php the images are fine.

When save as .html.. http://Handyman-Services.NYC/NYC-Handyman-Services.html the images are distorted...?

What am I missing here...please help. Thanks JB

Answer 1

Solution: Remove the height attribute from your images.

The distortion is due to the explicitly defined width and height of the images. The images have CSS styling overriding the width to scale down to 100% of the parent container, but the image height is unchanged so it looks distorted (because the aspect ratio of the image is not maintained).

The explicit width and height attributes are missing from the images in the PHP file so that is why it is not distorted.

Answer 2

you have width and height set on the tags when you save it as .html. Possibly because you're using an editor of some sort. Remove the width and height properties and it works fine.

You have this in the HTML file:

<li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
    <img height="666" width="1920" draggable="false" src="assets/extra-images/NY_Handyman_Services_Voted_Number_One_Handyman_Service_of_2015.jpg">
</li>

You should have this:

<li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
    <img draggable="false" src="assets/extra-images/NY_Handyman_Services_Voted_Number_One_Handyman_Service_of_2015.png">
</li>