O Bootstrap Image Ressient

As imagens são os componentes de design populares de qualquer aplicativo. Eles aprimoram a exibição do aplicativo e os tornam atraentes. O Bootstrap oferece muitas classes que fornecem várias funcionalidades aos elementos. Mais especificamente, o “IMG-FLUID”É uma daquelas classes que fornecem capacidade de resposta às imagens.

Este artigo descreverá:

• Como redimensionar uma imagem usando bootstrap?
• Como ver o tamanho da imagem em telas diferentes?

Como redimensionar uma imagem usando bootstrap?

O "IMG-FLUID”A classe é utilizada para tornar a imagem responsiva. Imagens responsivas são aquelas que redimensionam automaticamente de acordo com os tamanhos de tela. A classe "img-fluid" tem propriedades CSS predefinidas "largura máxima"Com o valor"100%" e "altura"Com o valor"auto”.

Confira o exemplo para entender o conceito declarado.

Html

Adicione o html “"Elemento com os atributos" SRC "," Class "e" Alt ", onde:

• ““src”Atributo define o caminho da imagem.
• ““aula"Está definido com a classe" img-fluid "para torná-la responsiva.
• ““alt”Especifica o texto alternativo que será exibido se a imagem não puder carregar:

Como você pode ver, a imagem responsiva foi criada com sucesso:

Como ver o tamanho da imagem em telas diferentes?

Na página da web, clique com o botão direito do mouse e escolha o “Inspecionar”Opção. Como resultado, a janela da ferramenta de desenvolvedores será aberta, de onde você deve clicar em “Alterne a barra de ferramentas do dispositivo" recurso:

Em seguida, clique no “Dimensões: Responsivo”Opção. Um menu suspenso aparecerá. Selecione as opções e veja como a imagem ficará nesse dispositivo específico:

É assim que as imagens podem ser redimensionadas usando o bootstrap.

Conclusão

O bootstrap “IMG-FLUID”A classe é utilizada para tornar as imagens responsivas. Esta classe tem um CSS predefinido “largura máxima”Propriedade com o valor“100%" e "altura"Com o valor"auto”. Para tornar a imagem redimensível de acordo com os tamanhos da tela, primeiro, adicione a imagem usando o elemento "" e associe a classe "img-fluid". Este artigo demonstrou como fazer a imagem redimensionar usando o bootstrap.