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

【问题标题】：My PrettyPhoto images get distorted when I save them as an .HTML File当我将 PrettyPhoto 图像保存为 .HTML 文件时，它们会变形
【发布时间】：2016-01-05 01:44:17
【问题描述】：

当我将 prettyPhoto 图像保存为 .HTML 文件时，它们会变形。当我将页面另存为 .html 或 .htm 时，图像会变形，当我将页面另存为 .php 时，PrettyPhoto 图像就可以了。

这就是发生的事情.. http://Handyman-Services.NYC/NYC-Handyman-Services.php 图片很好。

当另存为.html时..http://Handyman-Services.NYC/NYC-Handyman-Services.html 图像失真...？

我在这里错过了什么......请帮忙。谢谢JB

【问题讨论】：

与我们分享一点代码不会让我们心碎！

标签： php html photos prettyphoto

【解决方案1】：

当您将其保存为 .html 时，您在标签上设置了宽度和高度。可能是因为您正在使用某种编辑器。删除宽度和高度属性，它工作正常。

你在 HTML 文件中有这个：

<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>

你应该有这个：

<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>

【讨论】：

【解决方案2】：

解决方案：从图像中删除高度属性。

失真是由于图像的明确定义的宽度和高度。图片的 CSS 样式覆盖宽度以缩小到父容器的 100%，但图片高度未更改，因此看起来失真（因为图片的纵横比未保持）。

PHP 文件中的图像缺少明确的宽度和高度属性，因此它没有失真。

【讨论】：