尝试在不干扰页面上所有其他元素的情况下调整图像大小以适应 CSS 中的导航栏

如何解决尝试在不干扰页面上所有其他元素的情况下调整图像大小以适应 CSS 中的导航栏

我正在尝试将此图像放入导航栏中，例如徽标所在的位置。我尝试使用 float left 和 transform scale 属性，但图像非常大，我认为它仍然保留原始大小的容器空间。如何在不推动所有其他元素的情况下减小尺寸？任何帮助表示赞赏。

解决方法

您可以尝试将图像设为 div 元素的“背景图像”，并操纵 div 的大小和图像的缩小/增长属性以达到预期效果。请参见以下示例：

.nav {
  display: flex;
  align-items: center;
  background-color: #eee;
}

.logo {
  background-image: url("https://picsum.photos/200");
  width: 200px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

h1 {
  margin-left: 10px;
}

<div class="nav">
  <div class="logo"></div>
  <h1>
    Test
  </h1>
</div>

,

MDN article on images 涵盖了许多处理此问题的方法。您可以定位 let userInput = prompt("would you like to convert to c or f?") let userTemp = prompt("what temperature?") userInput = userInput.toLowerCase(); let result; if (userInput == 'c') { result = (userTemp - 32) * 5 / 9 } else { result = (userTemp * 9 / 5) + 32 } document.write(result) 元素并将其限制为容器的大小或任何适合您情况的大小，例如：

img

我直接使用了 img { max-width: 100%; } ，但您可能会使用 img。不过，重要的一点是，如果您控制图像，最好调整实际源的大小，这样带宽就不会因下载不必要的大文件而浪费。