当宽度为设备宽度且高度为原始图像的高度时，UIImageView 中的图像被裁剪

Posted 2023-02-24

【中文标题】当宽度为设备宽度且高度为原始图像的高度时，UIImageView 中的图像被裁剪

【英文标题】：Image in the UIImageView is clipped when width is device width & height is original image's height

【发布时间】：2019-04-03 06:23:09

【问题描述】：

我创建了一个 ImageViewController，用于查看长图像。 （如漫画应用）

但是，UIImageView 的宽度是设备宽度，高度是原始尺寸（纵横比）

但是图像被裁剪了。我该怎么做？

界面代码

    fileprivate let scrollView = UIScrollView().then 
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.backgroundColor = .yellow
        $0.bounces = false
    

    fileprivate let stackView = UIStackView().then 
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.axis = .vertical
    

    // MARK: - View Life Cycle
    override func viewDidLoad() 
        super.viewDidLoad()

        self.view.addSubview(self.scrollView)
        self.scrollView.addSubview(self.stackView)

        self.scrollView.snp.makeConstraints  make in
            make.edges.equalToSuperview()
        
        self.stackView.snp.makeConstraints  make in
            make.edges.equalTo(self.scrollView)
        

    

添加 UIImageView 代码

for element in lists 
    let imgView = UIImageView()
    imgView.setImage(element) // set image from url

    imgView.contentMode = .scaleAspectFill

    imgView.clipsToBounds = true
    imgView.translatesAutoresizingMaskIntoConstraints = false
    self.stackView.addArrangedSubview(imgView)
    imgView.widthAnchor.constraint(equalTo:    self.scrollView.widthAnchor, multiplier: 1.0).isActive = true
    imgView.heightAnchor.constraint(equalTo:     self.scrollView.heightAnchor, multiplier: 1.0).isActive = true

UIImageView 如何设置纵横比（最大宽度）？

---

我找到了解决办法！

在下面添加代码，

func imageScaled(with sourceImage: UIImage?, scaledToWidth i_width: Float) -> UIImage? 
        let oldWidth = Float(sourceImage?.size.width ?? 0.0)
        let scaleFactor: Float = i_width / oldWidth

        let newHeight = Float((sourceImage?.size.height ?? 0.0) * CGFloat(scaleFactor))
        let newWidth: Float = oldWidth * scaleFactor
        print(newHeight)

        UIGraphicsBeginImageContext(CGSize(width: CGFloat(newWidth), height: CGFloat(newHeight)))
        sourceImage?.draw(in: CGRect(x: 0, y: 0, width: CGFloat(newWidth), height: CGFloat(newHeight)))
        let newImage: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    

然后，设置为 UIImageView。

imgView.setImageScaled(element, width: Float(self.scrollView.frame.width))

【参考方案1】：

由于您的图像高度大于 iphone 的显示高度，您必须将图像视图放在滚动视图中并将内容模式设置为 .scaleAspectFit 并将 imageView 的高度设置为等于图像的高度

imgView.contentMode = .scaleAspectFit

【讨论】：

我试过 scaleAspectFit.. 但这种模式的宽度不准确。 UIImageView 不是全宽.. 我将 contentMode 更改为 scaleAspectFit，但屏幕是 puu.sh/D9mVI/0bbb185ef0.png

这是因为图像使用 . scaleAspectFit。如果你想占据全高和全宽使用 scaleToFill

我使用 scaleToFill... 然后，图像视图很奇怪。图像失真

那么唯一可能的方法是您必须将图像视图放在滚动视图中并将内容模式设置为 .scaleAspectFit 并将 imageView 的高度设置为等于图像的高度

谢谢。我会回家试试你的答案。祝你有美好的一天。