我一直在构建一个有两个图像的网站。我使用background:url("../image"(属性。
问题是我不知道如何把它变小，每次我把宽度改得更小，它看起来都是这样的[IMAGE1
li {
display: inline;
padding-right: 60px;
}
.navigacka {
background: red;
text-align: center;
padding: 10px;
color: white;
}
.logo {
padding: 60px 0;
text-align: center;
}
.logo a {
width: 260px;
height: 344px;
display: inline-block;
text-indent: -9999px;
background:url("../img/logo.png") 0 0 no-repeat;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<header id="header" class="navigation">
<nav id="nav" class="mainnav">
<div class="navigacka">
<ul>
<li>A PROPOS</li>
<li>SERVICES</li>
<li>IDEES</li>
<li>CHEGUES CADEUX</li>
<li>CONTACT</li>
</ul>
</div>
<h1 class="logo">
<a href="#">House Kitchen</a>
</h1>
</body>有什么解决办法吗？
您可以将background-size:contain;添加到.logo acss中。
这将使你的照片与原来的位置相匹配。
.logo a {
width: 260px;
height: 344px;
display: inline-block;
text-indent: -9999px;
background:url("../img/logo.png") 0 0 no-repeat;
background-size:contain;
}
设置背景属性：background: url("../img/logo.png"); background-repeat: no-repeat; background-size: cover;
别忘了添加background-size: cover;使背景图像适合屏幕background-position: center;使图像位置居中height: 100vh;使高度适合屏幕高度