Question

当我将它们保存为.HTML文件时，我的漂亮照片图像会失真。当我将页面保存为.html或.htm时，图像会变形，当我将页面保存为.php时，PrettyPhoto图像就可以了。

发生了什么.. http://Handyman-Services.NYC/NYC-Handyman-Services.php 图像很好。

保存为.html .. http://Handyman-Services.NYC/NYC-Handyman-Services.html 图像是扭曲的......？

我在这里缺少什么......请帮助。谢谢JB

Answer 1

解决方案：从图片中删除height属性。

失真是由于图像的明确定义的宽度和高度造成的。图像具有覆盖宽度的CSS样式，可缩小到父容器的100％，但图像高度不变，因此看起来失真（因为图像的纵横比不会保持）。

PHP文件中的图像缺少显式的width和height属性，这就是它没有失真的原因。

Answer 2

将标签保存为.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>

当我将它们保存为.HTML文件时，我的PrettyPhoto图像会失真

2 个答案: