Como implementar imagens CSS preenchidas com divs

A primeira estrutura: a imagem é um elemento filho

 <div>
        <img src="Introduza o endereço da imagem" alt="" class="Img">
</div>

Método 1: adicione object-fit:cover ao elemento img

 div{
largura: 500px;
altura: 500px;
}
.Img{
    largura: 100%;
    altura: 100%;
    ajuste ao objeto: capa;
}

Método 2: centralize o elemento img verticalmente e defina a largura e altura mínimas para tela inteira

 div{
	largura: 500px;
	altura: 500px;
	posição:relativo;
	estouro: oculto;
	}
.Img{
	posição: absoluta;
	topo: 50%;
	esquerda: 50%;
	exibição: bloco;
	largura mínima: 100%;
	altura mínima: 100%;
	transformar:traduzir(-50%,-50%);
}

A segunda estrutura: a imagem é uma imagem de fundo

 <div class="container"></div>

Método: Adicione background-size: cover ao elemento div e defina a imagem como não repetida, não repetida;

 .recipiente{
				altura: 500px;
				largura: 500px;
				margem: 0px automático;
				plano de fundo: url('../Status/img/health.png') sem repetição;
				tamanho do fundo: capa;
			}

Isso conclui este artigo sobre como preencher um div com imagens CSS. Para obter mais informações sobre como preencher um div com imagens CSS, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. códigos de download no futuro.