我该如何修复出现拉伸的图像？

Question

所以我只是提出了一个网站，我的高中和实现大量的图片都是本页面 www.eriesd.org/central/central2/staff.php

你是什么让不那么捉襟见肘的图像的最佳方式上特别是捉襟见肘？

我正在考虑添加一个div，并添加背景图片与中心或50％50％。另外在职业和技术页面，我注意到信息页面不在IE中加载，但其他页面加载罚款有其他人曾经有这个问题？

我基本上在菜单和选项中获取位置，并调用一个ajax请求，它加载连接到我的数据库的3个布局中的一个，并根据选项和位置获取信息。

Answer 1

假设使用某种php CMS上传图片，我会做的第一件事就是在上传时正确处理图片：除了更大的图片，您还需要生成一个缩略图适合您需要的页面大小。

我还建议向正在上传图片的用户添加通知，此特定图片需要具有横向格式，就像您在页面上使用的那样。

CSS解决方案将是我解决小问题的最后手段。

编辑：除此之外，我会认真考虑发布好像所有的电子邮件地址，并添加一些分页的页面现在需要很长的时间来加载（尤其是与所有的图像比你需要大很多他们是......）。

Answer 2

如果只指定宽度，高度将按比例设置，从而防止图像伸展。

Answer 3

因为您为<img>标记指定了width和height属性，所以它们被拉伸。如果实际图像的尺寸不同，则可以看到浏览器没有选择，只能扭曲图像以使其符合指定的高度和宽度。

只要不指定height或width或两者，并且图像将会正常。

Answer 4

您应该只在img上设置height，并将width:200px;text-align:center CSS添加到anchor，如果您想在白色区域的两侧。忽略宽度会缩小图像周围的空白。

<a class="image" style="width:200px;text-align:center"> 
    <img src="http://www.eriesd.org/central/central2/images/staff/kranking.jpg" alt="missing photo" height="112"> 
</a> 

Answer 5

我会回答你关于图像的第一个问题。真正的问题是你的图像的大小不适合你想要的空间。我检查过的其中一个是重达1.5MB的6MP（2848x2144）图像。还有更多这种近似大小和维生素。这些图像中的任何一个比整个页面都要大很多。第一步是让图像达到您需要的大小。您的页面将近19MB。不仅如此，大多数浏览器在缩放图像方面做得很糟糕，您将发送大量额外的数据，并且对于没有快速连接的用户而言，页面加载速度非常缓慢。想象一下，一位使用移动浏览器的用户正在等待并咀嚼他们的数据计划！具有DSL的用户可能需要几分钟的时间;拨号可能需要数小时。

如果您手动上传它们，请先调整它们的大小。确定大小限制并首先调整大小和裁剪。如果您使用的是CMS，请查找设置，插件或定制它以制作较小的缩略图版本并使用它。

Answer 6

为了保持布局看起来不错和平等，您可以做的唯一事情就是延长它们，或者，甚至更好地裁剪图像并调整它们的大小。你大概可以通过编程的方式对大部分图片进行编辑，只要假设顶部中心是他们的头像就在哪里。尽管如此，你已经在整个网站上扩展了图片问题。

至于职业&技术的网页，他们实际上仍然被加载（至少在最新的IE），如果你看看源，但他们没有示出于某种原因，所以，无论你有.post或.content的一些CSS或JavaScript问题。它甚至会弹出一秒钟，然后消失。