响应式html img背景

时间：2018-11-30 14:08:37

标签： javascript html css image responsive

大家好，我们都在寻找几天的头灯，以使下面的图像作为菜单的背景可以完全看到。.但是我找不到解决方法..尽管我改变了图像的大小，反应迅速.. 我要附上我的代码和相关照片的证据... 

<!DOCTYPE html>
<?php 
	session_start();
    if(!isset($_SESSION["username"])){
    	header('location: ../index.php');
    }else
    {
    
?>
<html>
	<head>
    <title>G.E.D.</title>
		<link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			.bgimg-1{
				background-attachment: fixed;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url("images/sfondo.png");
			}
		</style>
		<style>
		   .w3-button
		   {
			   background-color:#FFFF;
		   }
		   .tuodiv 
		{
					width: 100%; height: 100%; top: 0; left: 0;
					background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
		}
		 
.img {
    max-width: 100%;
}
 
	.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
		</style>
	</head>
	
<body >
<img src="images/img/sfondo.png" style="background-position:center;"class="img-responsive" alt="Responsive image" />
 
		<div class="w3-top">
			
			<div class="iltuoid">		
		</div>
		</div>
			<div class="w3-display-middle w3-contener" >
			<br><br><br><br>			<br><br><br><br>

			
				<a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
				<div class="w3-center" style="margin-top: 40px;">
					<a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button" style="background-color:#FFFF;"><i class="fa fa-home"></i>Milano </a>
					<a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
					
				</div>
			</div>
			</div>
	</body>
</html>
<?php } ?>

my Image

总是有一个小的剪裁...或者图像太大，然后向下翻页

1 个答案:

答案 0 :(得分：2)

<html>
	<head>
    <title>G.E.D.</title>
		<link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			.bgimg-1{
				background-attachment: fixed;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url("images/sfondo.png");
			}
		</style>
		<style>
		   .w3-button
		   {
			   background-color:#FFFF;
		   }
		   .tuodiv 
		{
					width: 100%; height: 100%; top: 0; left: 0;
					background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
		}
		 
.img {
    max-width: 100%;
}
 
	.img-responsive {
    background:url("https://i.stack.imgur.com/VOGIV.png") no-repeat;
    width 100vw;
    height:100vh;
    background-size:100% 100%;
}
		</style>
	</head>
	
<body >
<div class="img-responsive" ></div>
 
		<div class="w3-top">
			
			<div class="iltuoid">		
		</div>
		</div>
			<div class="w3-display-middle w3-contener" >
			<br><br><br><br>			<br><br><br><br>

			
				<a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
				<div class="w3-center" style="margin-top: 40px;">
					<a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button" style="background-color:#FFFF;"><i class="fa fa-home"></i>Milano </a>
					<a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
					
				</div>
			</div>
			</div>
	</body>
</html>

相关问题
最新问题