UIImageView scaling image issue

0
votes

I have a UIImage with its width much greater than its height. I'm trying to display it in a UIImageView while keeping the aspect ratio, but the imageview only displays a small part of the image. Am I doing something wrong?

func scale(image:UIImage) {
  imageView.contentMode = UIViewContentMode.ScaleAspectFit
  imageView.image = image

  print(imageView.frame.size.width)
  print(image.size.width)
}

In the console it prints out:

250.0
3024.0

and the value for image.size.height is 150.

I want it to look something like this

screenshot1

but it looks like this

screenshot2

1
iosswiftuiimageviewscalingcontentmode
How do you want it to look? Can you please share some screenshots? – Ozgur Vatansever
Edited my post for screenshots – mawnch
Probably need to see the whole View Controller class. – BaseZen
Are you calling scale from viewDidLoad, if so try calling it from viewDidLayoutSubviews instead if you're using auto layout. – beyowulf
I'm not using auto layout. My UIImageView is only center aligned and set with 600 width and 250 height. – mawnch

1 Answers

0
votes

I can't understand your problem. Can you show your more code and storyboard?

Anyway, here the example to study the issue:

ViewController.swift

import UIKit

class ViewController: UIViewController {

@IBOutlet var imageView: UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

@IBAction func SelectImage(sender: UIButton) {
    switch sender.tag {
        case 0:
            imageView.image = UIImage(named: "image1")

        case 1:
            imageView.image = UIImage(named: "image2")

        default:
            break
    }
}

}

Main.storyboard

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="15G31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="mG9-Ie-ulu">
<dependencies>
    <deployment identifier="iOS"/>
    <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
    <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
</dependencies>
<scenes>
    <!--View Controller-->
    <scene sceneID="phU-zf-Z59">
        <objects>
            <viewController id="e22-se-1BX" customClass="ViewController" customModule="stackoverflow_39322193" customModuleProvider="target" sceneMemberID="viewController">
                <layoutGuides>
                    <viewControllerLayoutGuide type="top" id="ieU-T4-sfY"/>
                    <viewControllerLayoutGuide type="bottom" id="pBS-7o-IXo"/>
                </layoutGuides>
                <view key="view" contentMode="scaleToFill" id="GUS-lS-q7w">
                    <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                    <subviews>
                        <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="image1" translatesAutoresizingMaskIntoConstraints="NO" id="upT-By-1gT">
                            <rect key="frame" x="0.0" y="20" width="600" height="536"/>
                        </imageView>
                        <button opaque="NO" tag="1" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="j8O-MB-VWm">
                            <rect key="frame" x="479" y="562" width="102" height="30"/>
                            <state key="normal" title="Select Image 2"/>
                            <connections>
                                <action selector="SelectImage:" destination="e22-se-1BX" eventType="touchUpInside" id="uLd-Po-8ev"/>
                            </connections>
                        </button>
                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="agx-9V-LpP">
                            <rect key="frame" x="20" y="562" width="100" height="30"/>
                            <state key="normal" title="Select Image 1"/>
                            <connections>
                                <action selector="SelectImage:" destination="e22-se-1BX" eventType="touchUpInside" id="o9C-8u-JxX"/>
                            </connections>
                        </button>
                    </subviews>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                    <constraints>
                        <constraint firstItem="agx-9V-LpP" firstAttribute="leading" secondItem="GUS-lS-q7w" secondAttribute="leadingMargin" id="Gx9-Lx-S7I"/>
                        <constraint firstAttribute="trailing" secondItem="upT-By-1gT" secondAttribute="trailing" id="Hji-6d-ORN"/>
                        <constraint firstAttribute="trailingMargin" secondItem="j8O-MB-VWm" secondAttribute="trailing" constant="-1" id="Jst-1T-PP4"/>
                        <constraint firstItem="agx-9V-LpP" firstAttribute="top" secondItem="upT-By-1gT" secondAttribute="bottom" constant="6" id="STt-vV-su8"/>
                        <constraint firstItem="agx-9V-LpP" firstAttribute="top" secondItem="j8O-MB-VWm" secondAttribute="top" id="Uhl-PA-XLU"/>
                        <constraint firstItem="upT-By-1gT" firstAttribute="leading" secondItem="GUS-lS-q7w" secondAttribute="leading" id="Xay-ar-ZB2"/>
                        <constraint firstItem="upT-By-1gT" firstAttribute="top" secondItem="GUS-lS-q7w" secondAttribute="top" constant="20" symbolic="YES" id="ZT9-p7-2vo"/>
                        <constraint firstItem="pBS-7o-IXo" firstAttribute="top" secondItem="agx-9V-LpP" secondAttribute="bottom" constant="8" symbolic="YES" id="cRT-De-cHc"/>
                        <constraint firstItem="agx-9V-LpP" firstAttribute="baseline" secondItem="j8O-MB-VWm" secondAttribute="baseline" id="zc4-Dn-9Iu"/>
                    </constraints>
                </view>
                <connections>
                    <outlet property="imageView" destination="upT-By-1gT" id="Z9C-40-UW3"/>
                </connections>
            </viewController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="Bqi-Ne-i08" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="1116" y="517"/>
    </scene>
    <!--Root View Controller-->
    <scene sceneID="ywS-Tj-ArZ">
        <objects>
            <tableViewController id="Ixy-MR-Jzp" sceneMemberID="viewController">
                <tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="plain" separatorStyle="default" rowHeight="44" sectionHeaderHeight="28" sectionFooterHeight="28" id="qeH-hZ-NWL">
                    <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                    <sections>
                        <tableViewSection id="z96-NS-xWx">
                            <cells>
                                <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="z9h-YZ-NYn">
                                    <rect key="frame" x="0.0" y="64" width="600" height="44"/>
                                    <autoresizingMask key="autoresizingMask"/>
                                    <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="z9h-YZ-NYn" id="MBf-LU-nOF">
                                        <rect key="frame" x="0.0" y="0.0" width="600" height="43"/>
                                        <autoresizingMask key="autoresizingMask"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="show image" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="taK-E6-9Tb">
                                                <rect key="frame" x="254" y="11" width="92" height="21"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                        <constraints>
                                            <constraint firstItem="taK-E6-9Tb" firstAttribute="centerY" secondItem="MBf-LU-nOF" secondAttribute="centerY" id="Uxk-t1-uBI"/>
                                            <constraint firstItem="taK-E6-9Tb" firstAttribute="centerX" secondItem="MBf-LU-nOF" secondAttribute="centerX" id="fqV-Xt-MGV"/>
                                        </constraints>
                                    </tableViewCellContentView>
                                    <connections>
                                        <segue destination="e22-se-1BX" kind="show" identifier="showImageView" id="fpv-Ij-HJm">
                                            <nil key="action"/>
                                        </segue>
                                    </connections>
                                </tableViewCell>
                            </cells>
                        </tableViewSection>
                    </sections>
                    <connections>
                        <outlet property="dataSource" destination="Ixy-MR-Jzp" id="erF-5c-clc"/>
                        <outlet property="delegate" destination="Ixy-MR-Jzp" id="2Hw-QW-7TB"/>
                    </connections>
                </tableView>
                <navigationItem key="navigationItem" title="Root View Controller" id="Lrj-E3-lJl"/>
            </tableViewController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="T9r-3a-rLA" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="328" y="517"/>
    </scene>
    <!--Navigation Controller-->
    <scene sceneID="hl3-CB-blQ">
        <objects>
            <navigationController id="mG9-Ie-ulu" sceneMemberID="viewController">
                <navigationBar key="navigationBar" contentMode="scaleToFill" id="ZhA-OA-J4s">
                    <rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
                    <autoresizingMask key="autoresizingMask"/>
                </navigationBar>
                <connections>
                    <segue destination="Ixy-MR-Jzp" kind="relationship" relationship="rootViewController" id="h4s-cf-6cE"/>
                </connections>
            </navigationController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="it8-XA-fgK" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="-492" y="517"/>
    </scene>
</scenes>
<resources>
    <image name="image1" width="5000" height="1246"/>
</resources>
</document>

Result

enter image description here enter image description here

images to import

enter image description here enter image description here