No HTML/CSS, um usuário pode adicionar uma imagem, vídeos ou links para um site. No entanto, às vezes os usuários enfrentam dificuldade em redimensionar a imagem ou ajustar o tamanho da imagem sem esticá -la. Para esse fim, o CSS permite que seus usuários utilizem várias propriedades, como o “Objeto-ajustePropriedade CSS. Esta propriedade pode preencher o tamanho da imagem sem alongar.

Este post explicará:

• Como adicionar uma imagem em html?
• Como preencher o tamanho da imagem CSS sem alongamento?

Como inserir uma imagem em html?

As imagens na página HTML podem ser anexadas de muitas maneiras. No entanto, o "”A tag é um dos elementos principalmente utilizados para incorporar imagens.

Se o usuário desejar adicionar uma imagem à página HTML, consulte as instruções fornecidas.

Etapa 1: Adicionar cabeçalho

Primeiro, adicione um título usando o “

" marcação. Em seguida, adicione texto entre a tag de cabeçalho especificada.

Etapa 2: Adicione imagem

Em seguida, insira um “”Tag junto com os seguintes atributos:

• O "aula”O atributo é usado para acessar o elemento pelo nome da classe.
• O "src”O atributo é utilizado para adicionar o caminho da imagem ou URL.
• ““largura”Especifica o tamanho da imagem horizontalmente.
• ““altura”Aloca a altura da imagem:

Adicionar imagem

A saída mostra que a imagem foi adicionada com sucesso:

Como preencher o tamanho da imagem CSS sem alongamento?

Para preencher o tamanho da imagem CSS sem esticá -lo, experimente as instruções fornecidas.

Primeiro, acesse o “”Elemento usando“.cobrir”E aplique as seguintes propriedades CSS:

.cobrir
Objeto-ajuste: capa;
Largura: 50px;
margem: 20px;
Altura: 100px;

A descrição do código acima mencionado é o seguinte:

• O "Objeto-ajuste”A propriedade é utilizada para especificar como a imagem deve ser redimensionada para se ajustar ao seu contêiner. Por exemplo, definimos seu valor como “cobrir”.
• ““largura”Especifica o tamanho da largura da imagem.
• ““margem”Aloca o espaço ao redor do limite de um elemento.
• ““altura”Define a altura da imagem em um recipiente.

Pode -se observar que a imagem foi redimensionada e preenchida sem alongar:

Isso era tudo sobre preencher a imagem sem alongar.

Conclusão

Para preencher o tamanho da imagem sem alongar, primeiro, adicione uma imagem com a ajuda do “”Tag junto com o atributo de classe. Em seguida, acesse a imagem usando o nome da classe e aplique o “Objeto-ajuste”Propriedade CSS como“cobrir”. Além disso, aplique outras propriedades do CSS para estilo, como “largura","altura", e "margem”. Este post demonstrou o método para redimensionar e preencher a imagem sem alongar.