尝试调整图像大小以适应 CSS 中的导航栏而不影响页面上的所有其他元素

Question

我正在尝试将此图像放入导航栏中，就像徽标所在的位置一样。我尝试使用 float left 和 transform scale 属性，但图像真的很大，我认为它仍然包含原始大小的容器 space。如何在不推动所有其他元素的情况下减小尺寸？感谢任何帮助。

Answer 1

您可以尝试将您的图像设为 div 元素的“背景图像”，并操纵 div 的大小和图像的 shrink/grow 属性以获得预期结果.请参阅以下示例：

.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>

Answer 2

MDN article on images 涵盖了许多处理此问题的方法。您可以定位 img 元素并将其限制为容器的大小或适合您情况的任何大小，例如：

img {
  max-width: 100%;
}

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

尝试调整图像大小以适应 CSS 中的导航栏而不影响页面上的所有其他元素

Trying to resize an Image to fit on a Nav Bar in CSS without disturbing all other elements on the page

nav

graphical-logo