Largura e Altura para imagens HTML

Como definir a altura e largura das imagens?

Utilize os atributos height e width para configurar a altura e a largura da imagem.

Exemplo:

<img src="dino.jpg" height="150" width="150">

Como manter a proporção da imagem?

Exemplo:

<img src="dino.jpg" width="150" height="auto">

Outra forma de manter a proporção da imagem é definindo apenas um dos atributos height ou width. O navegador ajustará automaticamente o outro atributo para manter a proporção original da imagem. No entando, é recomendável descrever os dois atributos.

Exemplo:

<img src="dino.jpg" width="150">

Como esticar imagens no HTML?

Você pode esticar uma imagem definindo a altura ou a largura em porcentagem. Isso faz com que a imagem se ajuste ao tamanho do container (elemento pai).

Exemplo:

<img src="dino.jpg" height="90" width="100%">

Como definir a altura e largura das imagens com CSS?

Além dos atributos height e width, você também pode usar CSS para definir a altura e a largura das imagens. Isso pode ser feito diretamente no elemento img ou através de uma classe CSS. Vejamos os exemplos a seguir:

<!-- Usando estilo inline -->
<img src="dino.jpg" style="height: 150px; width: 150px;">

<!-- Usando uma classe CSS -->
<style>
  .imagem-grande {
    height: 150px;
    width: 150px;
  }
</style>
<img src="dino.jpg" class="imagem-grande">

Qual a diferença entre usar estilos ou atributos?

A principal diferença entre usar estilos CSS e atributos HTML para definir a altura e a largura das imagens está na flexibilidade e na separação de preocupações.

• Atributos HTML: São mais simples e diretos, ideais para ajustes rápidos e específicos.
• Estilos CSS: Oferecem maior flexibilidade e controle sobre o design. Usar CSS permite separar a apresentação do conteúdo, facilitando a manutenção e a reutilização de estilos.

Exemplo com atributos HTML:

<img src="dino.jpg" height="150" width="150">

Exemplo com estilos CSS:

<img src="dino.jpg" style="height: 150px; width: 150px;">

Exemplo com uma classe CSS:

<style>
  .imagem-grande {
    height: 150px;
    width: 150px;
  }
</style>
<img src="dino.jpg" class="imagem-grande">

Em resumo, para projetos maiores e mais complexos, é recomendável usar CSS para definir a altura e a largura das imagens, enquanto os atributos HTML podem ser úteis para ajustes rápidos e específicos.