尝试在 UIScrollview 中设置宽图像，高度固定

Posted 2023-03-21

【中文标题】尝试在 UIScrollview 中设置宽图像，高度固定

【英文标题】：Trying to set a wide image in UIScrollview, with a fixed height

【发布时间】：2019-10-12 14:04:19

【问题描述】：

在这个问题上卡了 2 天的新手（请帮忙！）。我有一个比屏幕宽得多的图像。我希望用户能够在图像上水平滚动，并且还希望图像具有特定高度，同时保持其纵横比。

目前 UIImageView 嵌套在 ScrollView 中。 ScrollView 在所有 4 个方向上对安全区域都有约束，将其放置在屏幕的上半部分（距安全区域底部 250 处）。 ImageView 对 Scrollview 的“内容布局指南”具有 0 的所有 4 个约束，以及与 ScrollView 的“框架布局指南”具有相等高度的第 5 个约束。

我最初尝试将图像内容模式设置为“Aspect Fit”。这保持了纵横比并在 ScrollView 中将图像设置为所需的高度，但是在图像的任一侧留下了大量的透明度，因此用户必须滚动一段时间才能看到图像。为此，我找不到仅在非透明部分的范围内包含滚动视图的解决方案，因此我将图像内容模式更改为“方面填充”。

这消除了两边的透明度，但图像现在太高并且垂直离开屏幕。我在 ImageView Size Inspector 上设置了“Clip to bounds”，并在代码中将其设置为 true，但图像仍然很高并且超出了指定的高度约束。我也用过：

gym_imageView.sizeToFit()
scrollView.contentSize = gym_imageView.frame.size

但这些都不能解决问题。

我的预期结果是原始尺寸的图像（W：12064px，H：1696px） 在保持纵横比的同时，将自身调整为约束高度（Scrollview 的 Content Layout Guide 的顶部和底部，0 到顶部和底部，这反过来又是安全区域顶部的约束 0，安全区域底部的 250+）。

有什么想法吗？

【参考方案1】：

内容模式会改变图像在 imageView 中的显示方式，但它不会调整 imageView 本身的大小。

您应该使用12064:1696 的乘数 在您的imageView 上设置显式纵横比约束。然后 Auto Layout 将能够根据它已经知道所需高度的事实来计算 imageView 的正确宽度。