使用 aspectFit 将图像缩放到大小答案

【问题标题】：scale image to size with aspectFit使用 aspectFit 将图像缩放到大小
【发布时间】：2020-06-14 22:14:33
【问题描述】：

我正在构建一个应用程序，您可以在其中将图像拖动到视图中。目前它看起来像这样：

如您所见，我将图像视图的背景颜色标记为绿色。图像视图有 contentMode aspectFit，它比它后面的黑色视图小 40 像素。我希望图像是图像视图的全长和全宽。 contentMode 应该是 aspectFit，即不会从图像中删除任何内容。是否可以调整图像的大小，使其距离视图有 20 像素或更多空间？

【问题讨论】：

.scaleToFill 你不会裁剪图像，但会被拉伸。使用aspectFill，您不会显示整个图像，但看起来更好
有没有不拉伸图片的方法？
如果有预览图像的地方，最好显示这样的图像 (.aspectFit)，而当您以小布局显示时，即使丢失了 o 位，也应该为缩略图图像使用 .aspectFill边缘。
@adri567 - 你的问题有点令人困惑......你想要在图像周围有一个 20 像素的“绿框”吗？绿框水平和垂直居中？
@adri567 - 您是否在 Storyboard 中布置图像视图？还是通过代码？

标签： ios swift uiview imageview uiimage

【解决方案1】：

@adri567 你应该使用UIViewContentModeScaleToFill 属性，比如

imageView.contentMode = .scaleToFill

试试这个！

【讨论】：

但在此之后图像被拉伸
那你需要把UIViewContentModeScaleAspectFill.
@adri567 你不能同时满足拉伸和裁剪的条件！除非您丢失一个内容，否则您无法实现用整个内容填充图像并且在不拉伸的情况下填充整个内容的属性是UIViewContentModeScaleAspectFill
@adri567 似乎您尝试显示横向和纵向图像。如果您想要完整的图像意味着尝试根据您选择的图像宽度和高度基于该图像方向更新您的 imageView 框架。那么只有你必须看到你想要的输出。
您可以获取您选择的图像宽度和高度，并尝试根据图像的宽度和高度属性以及与您的屏幕尺寸进行比较来找到纵向或横向。然后你可以定义内容模式，如 AspectFit for Landscape 否则 ScallToFill 到 Portrait.

【解决方案2】：

如果您想保持图像大小不变，但又不想拉伸它。你的解决方案是别的东西。

将图像显示为问题中的 .aspectFit
您显示的绿色视图将其替换为 .aspectFill 中的相同图像，但尽可能将其模糊化。

【讨论】：

但是现在有没有办法给图像视图一个动态高度？所以它应该距离水平边缘的 20pts。

【解决方案3】：

简单的数学可以解决这个问题。

对于快捷键：H -> height , W -> Width

我们知道这个通用公式是：h1 / w1 = h2 / w2

Hscreen / Wscreen = Himage / Wimage

所以我们知道屏幕宽度、图像高度和图像宽度。

我们可以得到屏幕宽度 -> view.frame.width

我们也可以将图像大小设为 -> image.size.width 和 image.size.height

Hscreen = (Himage) * (WScreen) / Wimage

您可以使用 Hscreen 来 imageViews 高度锚点。

【讨论】：

【解决方案4】：

一种方法...

将UIImageView 嵌入（绿色）UIView
在所有 4 个边上约束 imageView + 20 点“填充”
限制 greenView 的宽度（或其前导和尾随）
约束 greenView 的 Y 位置（top 或 centerY）
使用基于图像宽度和高度的乘数来约束 imageView 的高度

这是一个简单的例子：

class ViewController: UIViewController {

    let imgView: UIImageView = {
        let v = UIImageView()
        v.contentMode = .scaleToFill
        return v
    }()

    let greenView: UIView = {
        let v = UIView()
        v.backgroundColor = .green
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // replace with your image name
        guard let img = UIImage(named: "bkg640x360") else {
            fatalError("Could not load image!")
        }

        view.backgroundColor = .black

        // set the imgView's image
        imgView.image = img

        // use auto-layout constraints
        imgView.translatesAutoresizingMaskIntoConstraints = false
        greenView.translatesAutoresizingMaskIntoConstraints = false

        // add imgView to greenview
        greenView.addSubview(imgView)

        // add greenView to self.view
        view.addSubview(greenView)

        // we want to respect safe-area
        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([

            // constrain greenView leading and trailing to view (safeArea)
            greenView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
            greenView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),

            // constrain greenView centerY to view centerY
            greenView.centerYAnchor.constraint(equalTo: g.centerYAnchor, constant: 0.0),

            // constrain imgView to all 4 sides of greenView with 20-pts "padding"
            imgView.topAnchor.constraint(equalTo: greenView.topAnchor, constant: 20.0),
            imgView.bottomAnchor.constraint(equalTo: greenView.bottomAnchor, constant: -20.0),
            imgView.leadingAnchor.constraint(equalTo: greenView.leadingAnchor, constant: 20.0),
            imgView.trailingAnchor.constraint(equalTo: greenView.trailingAnchor, constant: -20.0),

            // constrain imgView proportional height equal to image height / width
            imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width),

        ])

    }

}

结果，使用640 x 360 图像：

并使用512 x 512（方形）图像：

这些是我的源图像：

【讨论】：