# SwiftUI图片调整小纸条

### 在SwiftPlayground中使用图片

我们可以使用Image将一个图片放入SwiftUI的View中，如果图片在Swift Playgrounds的资源库中，可以使用Image(uiImage: UIImage(#imageLiteral(resourceName: "young.jpg")))这样来使用，如果我们不加任何修饰就会看到图片原始的样子：

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651750618090/myaBQdcLr.png align="left")

显然这两张图片无法完整的显示出来了。

### Resizable

我们可以使用 .resizable() 修饰符来调整图片大小。它会让图片撑满当前自己View的区域。

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651750856095/sKYX4O7HU.png align="left")

SwiftUI帮我们达到了图片自动layout到整个屏幕的效果，但是，显然图片已经变形了。

### Aspect ratio

#### fit

为了让图片保持原有尺寸的长宽比（不让其变形），我们可以使用.aspectRatio(contentMode: .fit) 修饰符，它会沿一个边缩放图像以适应大小，宽出的边就会留下空白，从而保证显示出整张图片来：

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651751186642/WKjhp-Fjr.png align="left")

这样效果就非常棒了，在尽可能撑满当前View的情况下又不让图片保持了长宽比不发生变形的情况了。你完全可以使用.scaledToFit()修饰符替代.aspectRatio(contentMode: .fit)，它们的效果是完全一样的:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651751320513/THnLbHPMm.png align="left")

#### fill

如果我们不想让任何一边有空白，.aspectRatio(contentMode: .fit) 会让图片沿最长的边填充View，这样就会发生最小的边图片会超出View的范围被放大。

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651751691150/o4Ms-Q6fY.png align="left")

我们对小宝宝的图片加上了fill，效果很好，所有的边都满了，但是图片的高也被放大了，把下面的小姐姐的图片向下挤压了。

如果我们把小姐姐的图片加上fill后，小姐姐的图片把下面的View充满了，但是显然也把小宝宝的图片挤没了。我们使用.scaledToFill()替代.aspectRatio(contentMode: .fit)，再将图片所在的视图固定化大小看看就明白fill实质上是突破了View的边界的意思了：

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651752160731/ELrybYeox.png align="left")

#### Clipping

如果我们不想要让突破出去的部分显示出来，哪么你需要使用.clipped()修饰符手动剪裁突出的部分：

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651752279605/I_mvcJBJX.png align="left")

### overlay

如果你即想使用fill又不想使用frame，使用Stack的auto layout，同时不让下面的图片挤压上方的图片呢？这时可以使用一个无色的Color占位，再使用overlay显示图片即可：

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651795634472/AY660-G6g.png align="left")