ScrollView内的iOS Stackview具有保留图像纵横比

Question

I'm having a problem with scrollable content. Basically, I want to place one ImageView and one Label on the screen with ImageView width equals screen width. height depends on intrinsic content aspect ratio (while width is always equal screen width).

The label is 20 spacing bellow ImageView . That means whole content height may less or equal or even longer than the root view . What I have tried is to put Label and ImageView inside a StackView ( ImageView has Aspectfit setting), Then put StackView inside ScrollView . Set up constraints as below.

The problem is the distance between ImageView and top Superview and between ImageView and Label is too big (ideally should be 20). Is there any way to achieve the desired outcome?

PS: I have tried to set stackView distributtion but no help

Answer 1

tl;dr Remove the aspect ratio constraint and add a height constraint for the UIImageView .

It's important to understand that UIImageView is basically a container that holds an image, and its dimensions don't necessarily reflect the image's dimensions (unless you manually make them equal). When you selected Aspect Fit as UIImageView 's Content Mode, the size of the container didn't change to correspond the image's size; this setting only changed the way the image is placed inside the container.

As I can see in your screenshot, the UIImageView 's height is greater than its width; furthermore, the aspect ratio is fixed by the constraint you've added. When you placed a landscape-oriented image inside this container, the latter left white bars on the top and the bottom of the image (just like the black bars you see when you watch a widescreen video on an old monitor). Change Content Mode to Aspect Fill or Scale to Fill to see the actual size of the UIImageView .

To fix this, remove the aspect ratio constraint and set up a fixed height for either the UIImageView or the UIStackView . If I were you, I'd probably set the UIStackView 's height equal to Safe Area so that no matter how tall the stack view is, it doesn't go beyond the screen boundaries.