Xcode Imageview Aspect Fit 移除额外空间 [英] Xcode Imageview Aspect Fit Remove Extra Space

问题描述

我在 UITableViewCell 中有一个图像视图.

I have an imageview inside a UITableViewCell.

如果图像很大，带有 Aspect Fit 的 Imageview 会在顶部和底部创建大量额外空间.下图显示了额外的空间(灰色背景色).

Imageview with Aspect Fit creates a lot of extra space in the top and bottom if the image is large. The extra space (gray background color) is shown in the picture below.

如何删除多余的空间?

一些注意事项:

A few notes:

1. 此特定图像为 890 x 589，屏幕截图是在 iphone 6S 模拟器上截取的.

1. This particular image is 890 x 589 and the screenshot was taken on a iphone 6S simulator.

我将 UITableViewAutomaticDimension 用于自动表格单元格高度.

I am using UITableViewAutomaticDimension for automatic table cell height.

图像视图没有高度限制，因此可以相应地调整大小.

There is no height constraint on the imageview so it can resize accordingly.

提前致谢.

推荐答案

我遇到了同样的问题.当原始图像大小(宽度和/或高度)大于容纳它的 UIImageView 并且使用 Aspect Fit 调整图像大小以适应 UIImageView 时，就会发生这种情况.

I had the same issue. This happens when the original image size is larger (in width and/or height) than the UIImageView that holds it and the image is resized with Aspect Fit to fit into the UIImageView.

此处，图像宽度大于 UIImageView 所能容纳的宽度，因此 Aspect Fit 调整图像大小，保持原始纵横比.如果您阅读图像尺寸(通过观察或断点或其他方式)，您将看到图像尺寸为(例如)600(h) x 800(w)(3:4 比例).UIImageView 宽度是(例如)320(w) 因此显示的图像被缩放到 240(h) x 320(w)(保持 3:4 的比例).但是图像宽度仍然是真正的 600 x 800，并且由于对 UIImageView 高度没有限制，因此 UIImageView 大小为 600 x 320 --> 因为它可以将 UIImageView 高度设置为原始图像高度 (600).

Here, the image width is larger than can fit into the UIImageView so Aspect Fit resizes the image, keeping the original aspect ratio. If you read the image size (via watch or breakpoint or something) you will see that the image size is (for example) 600(h) x 800(w) (3:4 ratio). The UIImageView width is (e.g.) 320(w) thus the displayed image is scaled to 240(h) x 320(w) (keeping the 3:4 ratio). BUT the image width is still REALLY 600 x 800 and as there is no limitation on the UIImageView height the UIImageView size is 600 x 320 --> it sets the UIImageView height to the original image height (600) because it can.

我的解决方案是:(Swift 3)

My solution is this: (Swift 3)

给 Main.storyboard 中的 UIImageView 添加高度约束并通过 Outlet 链接:

Add a height constraint to the UIImageView in Main.storyboard and link it through an Outlet:

@IBOutlet weak var displayimage: UIImageView!
@IBOutlet weak var displayimageHeightConstraint: NSLayoutConstraint!

然后测试 UIImageView 是否比它持有的图像小(宽度).如果是，设置高度约束，使UIImageView的高宽比与图片纵横比一致:

Then test whether the UIImageView is smaller (width) than the image it holds. If so, set the height constraint so that the UIImageView height:width ratio is the same as the image aspect ratio:

if displayimage.frame.size.width < (displayimage.image?.size.width)! {
    displayimageHeightConstraint.constant = displayimage.frame.size.width / (displayimage.image?.size.width)! * (displayimage.image?.size.height)!
}

如果由于UIImageView高度受限，宽度设置为原始图像宽度的resize问题，图像两侧有空白，也可以进行补充操作.

The complementary operation is also possible if there is whitespace at the sides of the image due to an issue of resizing where the UIImageView height is limited and the width is set to the original image width.

@IBOutlet weak var displayimageWidthConstraint: NSLayoutConstraint!

if displayimage.frame.size.height < (displayimage.image?.size.height)! {
    displayimageWidthConstraint.constant = displayimage.frame.size.height / (displayimage.image?.size.height)! * (displayimage.image?.size.height)!
}

这篇关于Xcode Imageview Aspect Fit 移除额外空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！