Cambiar el tamaño de las imágenes con React

En este tutorial, aprenda cómo cambiar el tamaño de las imágenes en React, cómo evitar el encogimiento y otras distorsiones y cómo diseñar imágenes, usando JavaScript, HTML y CSS.

Introducción

Siempre es una buena idea tener imágenes en un sitio web o una aplicación web porque ayudan a atraer al usuario, pero cuando estas imágenes son tan grandes que el usuario tiene que desplazarse, distorsionando toda la página, se logra el efecto contrario.

En este artículo, aprenderemos cómo cambiar el tamaño de las imágenes con React utilizando varios enfoques posibles.

Cambiar el tamaño de las imágenes en React es muy similar a cambiar el tamaño de las imágenes en HTML tradicional porque usamos estilos CSS (ya sea estilo interno, en línea o externo) a través de className o el atributo style. También podemos usar los atributos height y width en la etiqueta img directamente.

{.icon aria-hidden=“true”}

Nota: En React, no usamos clase como lo hacemos en HTML, sino que usamos className, que realiza la misma función que clase y acepta valores de cadena.

El código generalmente se vería algo así como:

1
2
3
4
5
<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

Y nuestra imagen quedaría así:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

{.icon aria-hidden=“true”}

Nota: usamos img como selector, podemos decidir darle un className y usarlo como selector.

Cómo cambiar el tamaño de una imagen con estilos en línea

Usamos estilo externo en el ejemplo anterior, pero al igual que en HTML tradicional, podemos usar el atributo estilo para agregar estilo CSS. El valor del atributo estilo debe ser un objeto JavaScript con pares clave-valor:

1
2
3
4
5
6
7
8
import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
      </div>
   );
};

Por defecto, la unidad básica está en píxeles, pero supongamos que queremos usar otras unidades como rem, %, vh, etc. Haremos uso de string para el valor clave de estilos:

1
2
3
4
5
6
7
8
import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
      </div>
   );
};

Si tenemos muchas imágenes que necesitan un estilo similar y no queremos usar un estilo externo, podemos crear un objeto para contener estos objetos de estilo y luego agregar el objeto al atributo estilos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import Logo from './images/react-logo.png';

const App = () => {
   const myImageStyle = { width: '500px', height: '600px' };

   return (
      <div>
         <img style={myImageStyle} src={Logo} alt="" />
      </div>
   );
};

Cómo cambiar el tamaño de una imagen con los atributos ancho y alto {#cómo cambiar el tamaño de una imagen con los atributos ancho y alto}

En HTML tradicional, una forma de cambiar el tamaño de las imágenes es hacer uso de la propiedad height y width con la etiqueta img y esto también funciona con React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          <!-- OR -->
          <img src={Logo} width={500} height={600} alt="" />
      </div>
   );
};

El principal inconveniente de este método es que jugar con la altura y el ancho tiende a distorsionar las imágenes, haciéndolas encogerse, estirarse o perder su proporción. Esto se puede arreglar usando object-fit: cover;.

Dar estilo a nuestras imágenes

Cuando usamos height, width, max-height y otras propiedades de CSS para cambiar el tamaño de nuestras imágenes, tienden a distorsionarlas, haciéndolas encogerse o estirarse.

Siempre es una buena idea incluir la propiedad object-fit, que especifica cómo se debe cambiar el tamaño de una imagen para que se ajuste a su contenedor. Esta propiedad puede aceptar una variedad de valores como contain, cover, fill, none y scale-down.

Otras propiedades de CSS, como max-width, min-width, max-height y min-height, pueden definir los valores máximos y mínimos que puede alcanzar una imagen, lo que limita la distorsión.

Conclusión

En este artículo, aprendimos cómo cambiar el tamaño de las imágenes en React al observar las diversas opciones disponibles para nosotros.

Sin embargo, es preferible usar estilos CSS en lugar de tener que establecer atributos fijos para estas imágenes a menos que sea absolutamente necesario cuando desee recibir estos valores dinámicamente, en cuyo caso también se puede usar el estilo en línea.