Redimensionando Imagens com React

Introdução

É sempre uma boa ideia ter recursos visuais em um site ou aplicativo da Web porque eles ajudam a envolver o usuário, mas quando essas imagens são tão grandes que o usuário precisa rolar, distorcendo a página inteira, o efeito é oposto.

Neste artigo, aprenderemos como redimensionar imagens com React usando várias abordagens possíveis.

O redimensionamento de imagens no React é muito semelhante ao redimensionamento de imagens no HTML tradicional porque usamos estilos CSS (interno, embutido ou externo) via className ou de style atributo. Também podemos usar o height e width atributos no img marcar diretamente.

Observação: Em React, não usamos class como fazemos em HTML, em vez disso, usamos className, que tem a mesma função que classe e aceita valores de string.

O código geralmente pareceria algo ao longo das linhas de:

<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

E nossa imagem ficaria assim:

<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

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

Observação: nós costumavamos img como o seletor, podemos decidir dar-lhe um className e use-o como seletor.

Como redimensionar uma imagem com estilos embutidos

Usamos o estilo externo no exemplo anterior, mas assim como no HTML tradicional, podemos usar o style atributo para adicionar estilo CSS. o style O valor do atributo deve ser um objeto JavaScript com pares chave-valor:

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

Por padrão, a unidade básica está em pixels, mas suponha que queremos usar outras unidades como rem, %, vh, etc. Usaremos string para o valor da chave dos estilos:

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

Se tivermos muitas imagens que precisam de um estilo semelhante e não queremos usar um estilo externo, podemos criar um objeto para conter esses objetos de estilos e adicionar o objeto ao styles atributo:

import Logo from './images/react-logo.png';

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

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

Como redimensionar uma imagem com o largura E altura Atributos

No HTML tradicional, uma maneira de redimensionar imagens é fazer uso do height e width propriedade com o img tag e isso também funciona com React:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          
          <img src={Logo} width={500} height={600} alt="" />
      </div>
   );
};

A principal desvantagem desse método é que mexer na altura e na largura tende a distorcer as imagens, fazendo com que elas encolham, estiquem ou percam sua proporção. Isso pode ser corrigido usando object-fit: cover;.

Estilizando nossas imagens

Quando usamos o height, width, max-height, e outras propriedades CSS para redimensionar nossas imagens, elas tendem a distorcê-las, fazendo-as encolher ou esticar.

É sempre uma boa ideia incluir o object-fit propriedade, que especifica como uma imagem deve ser redimensionada para caber em seu contêiner. Esta propriedade pode aceitar uma variedade de valores, como contain, cover, fill, none e scale-down.

Outras propriedades CSS, como max-width, min-width, max-height e min-height, pode definir os valores máximos e mínimos que uma imagem pode atingir, limitando a distorção.

Conclusão

Neste artigo, aprendemos como redimensionar imagens no React observando as várias opções disponíveis para nós.

No entanto, é preferível usar estilos CSS em vez de definir atributos fixos para essas imagens, a menos que seja absolutamente necessário quando você deseja receber esses valores dinamicamente; nesse caso, o estilo inline também pode ser usado.