如何修复出现拉伸的图像？答案

【问题标题】：How can I fix images appearing stretched?如何修复出现拉伸的图像？
【发布时间】：2011-07-07 07:20:17
【问题描述】：

所以我刚为我的高中建立了一个网站，发现很多图片都被拉伸了，尤其是在这个页面上 www.eriesd.org/central/central2/staff.php

让图像不那么拉伸的最佳方法是什么？

我正在考虑添加一个 div 并添加具有中心中心或 50% 50% 的背景图像。同样在职业和技术页面上，我注意到信息页面无法在 IE 中加载，但其他页面加载正常，有其他人遇到过这个问题吗？

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

【问题讨论】：

请一次只回答一个问题。
也尝试选择更好的标题
来自您对图像缩放器的评论：您还可以使用 php GD 调用动态计算和发出图像大小
@horatio 是的，我愿意，并且图像类型和名称我还允许您将图像保存在所选目录中

标签： php html css internet-explorer

【解决方案1】：

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

我还建议向上传图片的人添加通知，该特定图片需要具有横向格式，因为这是您在页面上使用的格式。

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

编辑：除此之外，我会认真重新考虑发布所有类似的电子邮件地址并添加一些分页，因为页面现在需要很长时间才能加载（尤其是所有图像都很多比你需要的更大......）。

【讨论】：

是的，我建了一个小 cms，因为他们不需要那么多选项。我实际上也编写了一个图像调整器，所以我只是尝试使用它并消除了内联宽度和高度样式
发布这样的电子邮件是什么意思？老师推荐使用图片，因为有人可以轻松地写一些东西来抓取页面上的所有电子邮件，或者您是在谈论将其设为 mailto 链接？
@josh 所有电子邮件都以纯文本形式出现在源代码中，因此任何垃圾邮件发送者都可以轻松扫描您的页面以查找这些地址。使用图像是一种解决方案，但还有其他解决方案，只需在此处查看 SO。
好吧，已经找到了一种加密它们的算法，一开始会使用 javascript，但如果有人没有启用 javascript，他们可以通过查看源代码轻松查看电子邮件。仍在调整图像大小的工作是尝试使用 Photoshop 脚本来调整文件夹中所有图像的大小并将它们保存到另一个文件夹中，但我不确定它的效果如何

【解决方案2】：

它们被拉伸是因为您为 <img> 标记指定了 width 和 height 属性。如果实际的图片是不同尺寸的，可以看出浏览器别无选择，只能扭曲图片以使其适合指定的高度和宽度。

只是不要指定height，或width，或两者都指定，图像就可以了。

【讨论】：

【解决方案3】：

你应该只在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>

【讨论】：

【解决方案4】：

我将回答您关于图像的第一个问题。真正的问题是您的图像大小不适合您希望它们填充的空间。我检查的其中一个是 6MP (2848x2144) 图像，大小为 1.5MB。这种近似大小和尺寸的还有更多。这些图像中的任何一个都比整个页面大很多。第一步是将图像调整到您需要的大小。您的页面将近 19MB。不仅大多数浏览器在缩放图像方面做得很糟糕，而且您正在发送大量额外数据，并且对于没有非常快速连接的用户来说，页面加载速度非常慢。想象一下，一个使用移动浏览器的用户正在等待这个并浏览他们的数据计划！使用 DSL 的用户可能需要几分钟；拨号可能需要几个小时。

如果您要手动上传它们，请先调整它们的大小。找出大小限制，然后先调整大小和裁剪。如果您使用的是 CMS，请查找设置、插件或对其进行自定义以制作更小的缩略图版本并使用它。

【讨论】：

【解决方案5】：

为了保持布局看起来漂亮和平等，您唯一可以做的就是将它们拉伸成现在的样子，或者更好的是，稍微裁剪图像并调整它们的大小。您可能可以通过编程方式为大多数图片执行此操作，只需假设顶部中心是他们的头部所在的位置。不过，您在整个网站上都出现了拉伸图片问题。

至于职业和技术页面，如果您查看源代码，它们实际上仍在加载（至少在最新的 IE 中），但由于某种原因它们没有显示，所以，要么你有一些.post 或 .content 的 CSS 或 JavaScript 问题。它有时甚至会弹出一秒钟然后消失。

【讨论】：

是的，我注意到它会显示一秒钟然后消失，我必须稍后检查它，看看到底发生了什么

【解决方案6】：

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

【讨论】：