div (배경으로)에 맞게 이미지 크기를 조정하는 가장 좋은 방법

85 % 높이 및 100 % 너비 색인 페이지로 배경을 만들려고합니다. 사실 내가 bootstrap 4를 사용하고 있습니다. 제 문제는 이미지를 div에 배경으로 넣을 때 img 속성을 사용하려했지만 내 navbar가 이미지 아래로 튀어 오를 때 크기가 조정되지 않는 이미지 (이미지가 너무 큽니다) 만 표시된다는 것입니다. 물론 인터넷에서 모든 것을 시도했습니다. 내 코드는 다음과 같습니다.div (배경으로)에 맞게 이미지 크기를 조정하는 가장 좋은 방법

<!DOCTYPE html> 
<html lang="sk"> 

<head> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link rel="stylesheet" type="text/css" href="styles/normalize.css"> 
<link rel="stylesheet" href="styles/b4.css"> 
<link rel="stylesheet" type="text/css" href="styles/style.css"> 
<title>Reštaurácia</title>  

</head> 

<body> 

<!-- Navigation --> 
<div class="bg"> 

<nav class="navbar navbar-expand-sm navbar-light bg-faded"> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 

<!-- Brand --> 
<a class="navbar-brand mleft" href="#">Reštaurácia</a> 

<!-- Links --> 
<div class="collapse navbar-collapse mright" id="nav-content"> 
<ul class="navbar-nav ml-auto"> 
<li class="nav-item active "> 
<a class="nav-link ilink" href="#">Domov</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Rezervácia</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Menu</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Galéria</a> 
</li> 
<li class="nav-item "> 
<a class="nav-link " href="#">Kontakt</a> 
</li> 
</ul> 
</div> 
</nav> 
</div> 




<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
</body> 


</html>

출처

2017-12-29 Juraj Jakubov