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:
Confira nosso guia prático e prático para aprender Git, com práticas recomendadas, padrões aceitos pelo setor e folha de dicas incluída. Pare de pesquisar comandos Git no Google e realmente aprender -lo!
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.