Question

我对html很新，我在调整图像大小时遇到了问题。我正在使用html5和css3。我想在导航栏的右侧放置一个徽标，但每次调整大小时，都会保持其原始大小。

nav ul {
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  background-color: rgb(211, 11, 11);
}

nav ul li {
  display: inline;
}

.navlink:link, .navlink:visited {
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: rgb(255,255,255);
  background-color: rgb(211, 11, 11);
  text-align: center;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
}

.navlink:hover, .navlink:active {
  background-color: rgb(162, 2, 2);
}

.navlink:first-letter {
  font-size: 250% ;
}
nav {
  position:fixed;
  top: 0;
  margin:auto;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgb(211, 11, 11);
  opacity: 0.8;
  border-bottom: white thin solid;
  z-index: 1000;
  clear: both;
}

#ucc_logo{
  float:right;
  height: 5px;
  width: auto;
}

<nav id="navbar">
  <ul>
    <a href="index.html" class="navlink"><li>Base</li></a>
    <a href="output.html" class="navlink"><li>Output</li></a>
    <a href="obscure.html" class="navlink"><li>Obscure</li></a>
    <a href="logic.html" class="navlink"><li>Logic</li></a>
    <a href="extras.html" class="navlink"><li>Extras</li></a>
  </ul>
  <a id="ucc_logo" href="http://www.ucc.ie/en/"><img src="http://i.imgur.com/ISnWKPd.jpg" alt="UCC Logo"></a>
</nav>

Answer 1

你正在使用高度和#ucc_logo，它不会调整图像大小。

您必须将css应用于图像本身。

你好吗

#ucc_logo img {
  width: 100%;
  height: 100%;
}

它将使图像的高度和宽度等于父元素

Answer 2

你正在调整错误的元素。如果要保持图像的宽高比正确，则需要将css应用于它。

另外，由于锚标签和图像都遵循UL，因此浮动右边会将它放到下一行，而不是像我想象的那样将它放在第一行（可能是错的，也许你想要它下一行）。

nav ul {
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  background-color: rgb(211, 11, 11);
}

nav ul li {
  display: inline;
}

.navlink:link, .navlink:visited {
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: rgb(255,255,255);
  background-color: rgb(211, 11, 11);
  text-align: center;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
}

.navlink:hover, .navlink:active {
  background-color: rgb(162, 2, 2);
}

.navlink:first-letter {
  font-size: 250% ;
}
nav {
  position:fixed;
  top: 0;
  margin:auto;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgb(211, 11, 11);
  opacity: 0.8;
  border-bottom: white thin solid;
  z-index: 1000;
  clear: both;
}

#ucc_logo{
  float:right;
}
#ucc_logo img {
  height: 5px;
  width: auto;
}

<nav id="navbar">
  <a id="ucc_logo" href="http://www.ucc.ie/en/"><img src="http://i.imgur.com/ISnWKPd.jpg" alt="UCC Logo"></a>
  <ul>
    <a href="index.html" class="navlink"><li>Base</li></a>
    <a href="output.html" class="navlink"><li>Output</li></a>
    <a href="obscure.html" class="navlink"><li>Obscure</li></a>
    <a href="logic.html" class="navlink"><li>Logic</li></a>
    <a href="extras.html" class="navlink"><li>Extras</li></a>
  </ul>

</nav>

导航中的图像不会调整大小

2 个答案: