Dimensione uma imagem em HTML

1. Dimensione uma imagem de tamanho grande na janela de visualização do navegador em HTML
2. Use as propriedades width e min-width para dimensionar uma imagem em HTML

Neste tutorial, ilustraremos métodos para dimensionar imagens de grande porte em HTML.

Dimensione uma imagem de tamanho grande na janela de visualização do navegador em HTML

Podemos dimensionar uma imagem grande em HTML usando as propriedades width e height da imagem. Uma imagem grande sairá da borda da tela. Para dimensionar a imagem para o tamanho da janela de visualização, podemos usar um contêiner e definir suas propriedades height e width para a altura e largura da janela de visualização. Podemos usar as unidades vh e vw para definir o tamanho. Uma unidade de vh e vw corresponde a 1% da altura e largura da janela de visualização. Podemos definir a altura e largura da imagem usando a configuração para 100%. A imagem deve ser inserida dentro do container. Então, a imagem de tamanho grande caberá na janela de exibição.

Por exemplo, crie um div em HTML com a classe container. Dentro de div escreva a tag img e insira uma imagem de tamanho grande. Em CSS, selecione a classe container e defina sua height e width para 100vh e 100vw. Em seguida, selecione a tag img e defina sua height e width para 100%.

No exemplo abaixo, dimensionamos uma imagem grande para caber na janela de visualização usando unidades como vh, vw e %.

Código de exemplo:

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

Use as propriedades width e min-width para dimensionar uma imagem em HTML

Podemos usar as propriedades width e min-width para dimensionar uma imagem em HTML. Podemos usar essas propriedades ao definir o estilo da tag <img>. A propriedade width especifica a largura do elemento. A propriedade min-width especifica a largura mínima do elemento. Só será aplicado se o conteúdo for menor que a largura mínima. Caso contrário, esta propriedade não terá efeito. Além disso, esta propriedade também evita que o valor da propriedade width seja menor que min-width. Denotamos a width e largura mínima em pixels neste método.

Por exemplo, dentro do corpo do HTML, escreva a tag <img>. Dentro da tag <img>, especifique o caminho para a imagem pelo atributo src. Em seguida, forneça width de 25vw e min-width de 140px no atributo style. Em seguida, feche a tag <img> seguida por todas as tags abertas anteriormente.

Usamos as propriedades width e min-width para dimensionar a imagem. A imagem de tamanho grande que não cabe na janela de exibição pode caber na janela de exibição. A largura 25vw no exemplo abaixo mostra que a largura corresponde a 25% da largura da janela de visualização. Desta forma, podemos dimensionar a imagem usando a tag style em HTML.

Código de exemplo:

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />