CSS ajustar imagem com css

WilliamNascimento · 8 de abril de 2021

Tenho uma imagem com 400 px de altura , do tamanho da minha div , se eu colocar ela como background usar e usar a propiedade cover e imagem fica com altura desproporcional mas ocupa 100% .

A mesma coisa que eu usar o object fit cover com a imagem no html , teria alguma coisa de permanecer a altura da imagem e ela ocupar 100% da tela ?

<!-- html 1 -->
<section class = "abc">
		<img src = "kk.png" class = "bnr">
</section>


<!-- html 2 -->
<section class = "abc">
		
</section>

/* css 1 */
section.abc{
	max-height: 400px;
	height: 420px;
}
img.bnr{
	width: 100%;
	object-fit: cover;
	max-height: 420px;
}
/* css 2 */
section.abc{
	max-height: 400px;
	background-image: url(kk.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 400px;
}

Usei as duas formas acima

Marcelo Calazans · 8 de abril de 2021

@WilliamNascimento Olá, colega.

Aqui está funcionando. Mas não sei se era isso que você queria.

A onde está o object-fit: cover, eu coloquei também o height: 100%.

Estou usando um modelo aqui com uma foto de 1920 x 1080 que eu achei para testar.

Veja abaixo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<!-- html 1 -->
<section class = "abc"> 
		<img src="chrome.jpg" class = "bnr" alt="teste"> <!-- a foto tem 1920 x 1080-->
</section>

<style>
/* css 1 */
section.abc{
	max-height: 400px;
	height: 420px;
}
img.bnr{
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

</style>

</body>
</html>