如何防止 Storyboard 调整（拉伸）以 UIView 为中心的 UIImage 的大小？答案

【问题标题】：How to prevent Storyboard from resizing (stretching) a UIImage centered on a UIView?如何防止 Storyboard 调整（拉伸）以 UIView 为中心的 UIImage 的大小？
【发布时间】：2018-03-18 14:07:13
【问题描述】：

我有一个通用 iOS 应用程序，并试图从旧式启动图像转移到故事板启动屏幕上的简单居中图像，因此我有一个适用于所有设备的故事板。当应用程序在尺寸大于图像的设备上运行时，我的图像（640x1136，iPhone 5s 尺寸）不需要拉伸——换句话说，UIView 的背景颜色应该出现在较大设备上的图像周围。出于调试目的，我将视图背景颜色更改为艳丽的石灰。

我根据最高投票的答案（Suragch's）按照SO post here 中的指示在 UIImageView 上定义了 2 个约束，实际上还必须遵循已接受答案的建议添加额外的 UIView 以包含我的 UIImageView .

UIImageView 的“内容模式”是Center，所以看起来应该没有拉伸。

在图片中通知 UIImageView 的 Xcode 的 Size Inspector 设置。 UIView 具有 iPhone 7 大小的暗淡 (750x1334)，因此由于 iPhone 比我的图像高，因此 UIImageView 的位置使其 X 为 55，Y 为 99。宽度和高度与图像本身相同 (640x1136)。

当我在模拟器中运行时，iPhone 7 看起来应该与 Xcode 的 Interface Builder 显示的完全一样（石灰色出现在图像周围，但是，对于任何大于 iPhone 5s 或 SE 的设备，它看起来像图片我已附上（iPad Air，仅供参考）。您可以看出图像必须垂直拉伸很多，因为图像只有 1136 高。

我附上了 iPhone 7（模拟器）iPad Air 和 iPad Pro 的屏幕截图。请注意，iPad Air 的左右边缘出现了石灰色的水平条纹。请注意，对于 iPad Pro，石灰背景颜色开始显示在图像的上方。就好像在较小的设备上，系统正在拉伸 UIImageView，但随着设备屏幕尺寸的增加，这最终会停止，直到对于最大的设备（Pro），您实际上可以看到周围的背景。似乎对于高于 iPhone 5s 或 SE 的所有设备 sizes listed in the Apple docs，应该没有拉伸/扭曲。这就是我想要完成的。

界面生成器大小设置 iPhone 7（模拟器）截图 iPad Air（设备）截图 iPad Pro（设备）截图

【问题讨论】：

如果您想要的视图/图像完全覆盖屏幕（没有石灰绿色），您可以将顶部/底部/左侧/右侧约束设置为 0 到视图
我希望我的图像保持未拉伸。只有当图像的尺寸和设备的匹配时，它才应该完全覆盖屏幕。
所以你想让（黑色+蓝色的东西？）图像保持一个尺寸，如果图像没有填满整个屏幕，比如在 iPad 上，如果你愿意，可以添加一个额外的“边框”空气？
我的意思是看两幅图像之间的比例，它看起来没有被拉伸，你能发布你想要显示的内容吗？你希望图像在更大的屏幕上看起来如何？
好吧，我已经发布了我想要展示的内容。看到我提供的两张图片之间的区别了吗？第一个（Xcode 界面生成器）是正确的，只要设备不是 5s 或 SE，就应该显示类似的东西——没有石灰。我非常感谢您的帮助，但我需要/想要的非常清楚。

标签： xcode uiimageview storyboard constraints xcode8

【解决方案1】：

我终于能够通过完全消除限制并仅使用在您选择尺寸检查器时找到的自动调整大小设置来实现此功能。 UIImageView 现在保持其指定的大小并且不会被拉伸。

【讨论】：

【解决方案2】：

尝试为您的ImageView 添加宽度/高度约束：

这是通过首先选择您的ImageView 然后选择此|-☐-| 来完成的。图标（位于 Storyboard 窗口的右下角，在您可以更改设备类型的选项旁边）

【讨论】：

如果这对社区来说是一个准确的答案，那么图片需要显示所有设置。 “添加约束”按钮已禁用，因此您显示的内容甚至无法完成。我确实玩过这些设置，但没有任何效果。抱歉，我以前从未使用过约束。
你是对的 - 我添加了更好的图片和解释。当您单击复选框时，“添加约束”按钮将自动启用。
我做了完全你展示的内容，由于我无法提供图像，我只能说在我的 iPad Air 上图像没有居中，但它的顶部是固定的到屏风顶部，左侧固定在屏风左侧，只在右侧露出一条石灰绿色，底部被剪掉。让我们试试这个，因为你正在努力工作：我会把图像发给你，当你在模拟器中得到正确的答案时，你只需提供答案。设置非常简单：单个 Launch 故事板和一个简单的 640x1136 png 文件以它为中心。
听起来你可能有一些额外的约束，我的 ImageView 上唯一的约束是 Center X、Center Y、Width 和 Height
以上，根据我的问题本身，它说我们可以将其移至聊天会话。那个怎么样？问题和答案中的来回太多。

【解决方案3】：

好的，我想我已经找到了问题所在。您的图像尺寸太大。你说你希望它是 iPhone 5 的大小，它的 display 大小是 1136x640 像素。这与 Xcode 中的宽度/高度不相同。为此，请将设备更改为 iPhone 5（或类似设备）并获取尺寸。例如，iPhone 8 的View 的大小是 667x375。这样你的图像就不会被截断了。

【讨论】：

不，图片不是太大。这正是 Apple 要求的尺寸。这些是视网膜屏幕——你可以在这里阅读为什么使用更大的图像：danrodney.com/blog/…，你可以在这里的表格中验证 Apple 的尺寸要求：developer.apple.com/ios/human-interface-guidelines/…