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

Question

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

你是什​​么让图像不那么拉伸的最好方法？

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 4

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

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

Answer 5

为了使布局看起来美观且一致，您唯一可以做的就是将它们按原样拉伸，或者更好的是，稍微裁剪图像并调整它们的大小。 对于大多数图片，您可能可以通过编程方式执行此操作，只需假设顶部中心是他们的头部所在的位置。 不过，您在整个网站上都存在图片问题。

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

Answer 6

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