Saltar al contenido

¿Cómo cambiar el tamaño de la imagen con SwiftUI?

El paso a paso o código que verás en este post es la resolución más fácil y válida que encontramos a tu duda o problema.

Solución:

Deberías usar .resizable() antes de aplicar cualquier modificación de tamaño en un Image.

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

Qué tal esto:

struct ResizedImage: View 
    var body: some View 

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

    

la vista de la imagen es de 200×200, pero la imagen mantiene la relación de aspecto original (cambiando la escala dentro de ese marco)

Ampliando la respuesta y los comentarios de @rraphael:

A partir de Xcode 11 beta 2, puede escalar una imagen a dimensiones arbitrarias, manteniendo la relación de aspecto original envolviendo la imagen en otro elemento.

p.ej

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)

        
    

Resultados

Imágenes ajustadas que conservan la relación de aspecto

(Por alguna razón, la imagen se muestra un poco borrosa. Tenga la seguridad de que la salida real es nítida).

Sección de Reseñas y Valoraciones

Ten en cuenta comunicar este escrito si te valió la pena.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *