How to resize Image with SwiftUI?

Question

I have a large image in Assets.xcassets. How to resize this image with SwiftUI to make it small?

I tried to set frame but it doesn't work:

Image(room.thumbnailImage)
    .frame(width: 32.0, height: 32.0)

Answer 1

You should use .resizable() before applying any size modifications on an Image.

Image(room.thumbnailImage).resizable()
.frame(width: 32.0, height: 32.0)

Answer 2

在 SwiftUI 中，使用.resizable()方法调整图像大小。通过使用.aspectRatio()和指定 a ContentMode，您可以根据需要“适合”或“填充”图像。

例如，这里是通过拟合调整图像大小的代码：

Image("example-image")
.resizable()
.aspectRatio(contentMode: .fit)

Answer 3

Image(room.thumbnailImage)
    .resizable()
    .frame(width: 32.0, height: 32.0,alignment: .center)

在 SwiftUI 中，.ressized()属性有助于调整图像大小。之后我们可以给出一些定制尺寸。

Answer 4

另一种方法是使用scaleEffect修饰符：

Image(room.thumbnailImage)
    .resizable()
    .scaleEffect(0.5)

Answer 5

好吧，在SwiftUI中似乎很容易/按照他们给出的演示：https://developer.apple.com/videos/play/wwdc2019/204

struct RoomDetail: View {
     let room: Room
     var body: some View {

     Image(room.imageName)
       .resizable()
       .aspectRatio(contentMode: .fit)
 }

希望能帮助到你。

Answer 6

如果您想使用宽高比调整大小，则可以使用以下代码：

Image(landmark.imageName).resizable()
                .frame(width: 56.0, height: 56.0)
                .aspectRatio(CGSize(width:50, height: 50), contentMode: .fit)

Answer 7

因为我们不应该硬编码/修复图像大小。这里有一个更好的方法来提供根据不同设备上的屏幕分辨率进行调整的范围。

Image("ImageName Here")
       .resizable()
       .frame(minWidth: 60.0, idealWidth: 75.0, maxWidth: 95.0, minHeight: 80.0, idealHeight: 95.0, maxHeight: 110.0, alignment: .center)
       .scaledToFit()
       .clipShape(Capsule())
       .shadow(color: Color.black.opacity(5.0), radius: 5, x: 5, y: 5)

Answer 8

struct AvatarImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFill() // <=== Saves aspect ratio
                .frame(width: 60.0, height:60)
                .clipShape(Circle())

    }
}

Answer 9

默认情况下，图像视图会自动根据其内容调整大小，这可能会使它们超出屏幕范围。如果添加 resizing() 修饰符，则图像将自动调整大小，以便填充所有可用空间：

Image("example-image")
    .resizable()

然而，这也可能导致图像的原始纵横比扭曲，因为它将在所有维度上拉伸以填充空间所需的任何量。

如果您想保持其纵横比，您应该使用 .fill 或 .fit 添加纵横比修饰符，如下所示：

Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)

Answer 10

您可以根据您使用的内容调整图像大小：

图片来自资产：

Image("logo")
  .resizable()
  .scaledToFill() // OR .scaledToFit()
  .frame(width: 40, height: 40, alignment: .center)

使用 AsyncImage 从远程 url 获取图像：

AsyncImage(url: URL(string: "https://example.com/icon.png"))
   .frame(width: 50, height: 50)

带占位符：

AsyncImage(url: URL(string: "https://example.com/icon.png")) { image in
   image.resizable()
} placeholder: {
   ProgressView()
}
.frame(width: 50, height: 50)

来自 SF 符号的图像：

通过指定字体：

Image(systemName: "xmark")
   .font(.title)

通过使用框架：

Image(systemName: "xmark")
  .resizable()
  .scaledToFit()
  .frame(width: 40, height: 40, alignment: .center)

Answer 11

扩展@rraphael的答案和评论：

从Xcode 11 beta 2开始，您可以将图像缩放到任意尺寸，同时通过将图像包装在另一个元素中来保持原始纵横比。

例如

struct FittedImage: View
{
    let imageName: String
    let width: CGFloat
    let height: CGFloat

    var body: some View {
        VStack {
            Image(systemName: imageName)
                .resizable()
                .aspectRatio(1, contentMode: .fit)
        }
        .frame(width: width, height: height)
    }
}


struct FittedImagesView: View
{
    private let _name = "checkmark"

    var body: some View {

        VStack {

            FittedImage(imageName: _name, width: 50, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 50, height: 100)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 100)
            .background(Color.yellow)

        }
    }
}

结果

（由于某种原因，图像显示有点模糊。请确保实际输出清晰。）

Answer 12

这个怎么样：

struct ResizedImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFit()
                .frame(width: 200.0,height:200)

    }
}

图像视图为200x200，但图像保持原始宽高比（在该帧内缩放）

Answer 13

注意：我的图像名称是img_Logo，您可以更改图像名称定义图像属性：

 VStack(alignment: .leading, spacing: 1) {
                        //Image Logo Start
                        Image("img_Logo")
                            .resizable()
                            .padding(.all, 10.0)
                            .frame(width: UIScreen.main.bounds.width * 0.4, height: UIScreen.main.bounds.height * 0.2)
                        //Image Logo Done
                    }

Answer 14

Image(systemName: "person.fill")
  .font(.system(size: 13))

如果您正在使用，也将起作用systemName。

Answer 15

SwiftUI 为我们提供了.ressized()修饰符，它可以让 SwiftUI 调整图像大小以适应其空间

struct ContentView: View {
    var body: some View {
        Image("home")
            .antialiased(true) //for smooth edges for scale to fill
            .resizable() // for resizing
            .scaledToFill() // for filling image on ImageView
    }
}