Bootstrap header 不会改变图片大小

Question

我非常想完成这项工作，但我不确定自己在做什么。由于某些原因，小视口中的图像比大视口中的图像小，所以我很困惑。

    <div class="container-fluid p-2">
        <div class="flex-row">
            <div class="d-flex justify-content-center justify-content-xl-between align-items-center flex-wrap">
                <div class="d-flex  p-2">
                    <img id="logo" class="img-fluid" src="img/croppedlogo.svg" style="min-width: 300px; max-width: 100%;">
                </div>
                <div class="w-100 d-none d-sm-flex d-xl-none"></div>
                <div class="d-none d-sm-flex p-2">
                    <div>
                        <a class="headerLink" href="index.aspx">Home</a>
                        <a class="headerLink" href="index.aspx">Products</a>
                        <a class="headerLink" href="index.aspx">About</a>
                        <a class="headerLink" href="index.aspx">Blog</a>
                        <a class="headerLink" href="index.aspx">Contact</a>
                    </div>
                </div>
                <div class="d-flex d-sm-none p-2">
                    <img src="img/menu.png">
                </div>
                <div class="w-100 d-xl-none"></div>
                <div class="p-2">
                    <a href="index.aspx">
                        <img src="img/btnLogin.png" />
                    </a>
                    <a href="index.aspx">
                        <img src="img/btnRequestDemo.png" />
                    </a>
                    <a href="index.aspx">
                        <img src="img/btnResources.png" />
                    </a>
                </div>
            </div>
        </div>
    </div>

这是少量额外的 CSS 我有：

body {
    margin: 0px;
    font-family: Arial;
    font-size: 1em;
    background-color: #FBFBFD;
}

.headerLink + .headerLink {
    margin-left: 10px;
}

a.headerLink {
    color: black;
    text-decoration: none;
    font-weight: bold;
    padding: 0px;
}
a.headerLink:hover {
    text-decoration: underline;
}

按钮 png 图像在 100px x 50px 到 200px x 50px 之间

Header logo如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="logo" x="0px" y="0px" viewBox="49.199989318847656 82.18773651123047 697.5000610351562 155.11227416992188" style="enable-background:new 0 0 792 330;" xml:space="preserve">
     viewBox="0 0 792 330" style="enable-background:new 0 0 792 330;" xml:space="preserve"&gt;>

我正在尝试让图像在较小的视口中跨越屏幕的宽度，但就目前而言，phone 中的布局甚至比完整桌面上的布局还要小设置。

如有任何帮助，我们将不胜感激

Answer 1

根据您编写代码的方式，我了解到您的问题出在较小的屏幕上，因此根据您所拥有的，我编写了以下代码：

body {
  margin: 0px;
  font-family: Arial;
  font-size: 1em;
  background-color: #fbfbfd;
}

.headerLink+.headerLink {
  margin-left: 10px;
}

a.headerLink {
  color: black;
  text-decoration: none;
  font-weight: bold;
  padding: 0px;
}

a.headerLink:hover {
  text-decoration: underline;
}

@media all and (max-width: 768px) {
  figure img {
    width: 150px;
    height: 50px;
    object-fit: cover;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid p-2">
  <div class="flex-row">
    <div class="d-flex justify-content-center justify-content-xl-between align-items-center flex-wrap">
      <div class="d-flex  p-2">
        <img id="logo" class="img-fluid" src="img/croppedlogo.svg" style="min-width: 300px; max-width: 100%;">
      </div>
      <div class="w-100 d-none d-sm-flex d-xl-none">
        <div class="d-none d-sm-flex p-2">
          <div>
            <a class="headerLink" href="index.aspx">Home</a>
            <a class="headerLink" href="index.aspx">Products</a>
            <a class="headerLink" href="index.aspx">About</a>
            <a class="headerLink" href="index.aspx">Blog</a>
            <a class="headerLink" href="index.aspx">Contact</a>
          </div>
        </div>
      </div>
      <div class="d-flex d-sm-none p-2">
        <img src="img/menu.png">
      </div>
      <div class="w-100 d-xl-none"></div>
      <figure class="d-flex p-2">
        <a href="index.aspx">
          <img src="img/btnLogin.png" />
        </a>
        <a href="index.aspx">
          <img src="img/btnRequestDemo.png" />
        </a>
        <a href="index.aspx">
          <img src="img/btnResources.png" />
        </a>
      </figure>
    </div>
  </div>
</div>

请注意，我将负责图像的 div 重命名为 figure 只是为了使 CSS 工作更轻松，但您可以随意调用它。

您希望图像在较小的视口中占据屏幕的整个宽度，但您说图像的宽度在 100 像素到 200 像素之间，因此不清楚是否要调整它们的大小，但作为示例，我使用了CSS 中的 150px 能够说明示例。请注意，我对图像使用 object-fit: cover 以保持其比例并填充提供的尺寸。但是这里可以裁剪图像以适合。但是如果你想不惜一切代价扩展它们，你可以使用 width: 100vw; object-fit: fill;

关于这个具体的图像问题，我建议您查看来自 W3 Schools 的 link：CSS The object-fit Property。

至于您提供的 .svg，我无法将其插入到您的代码中，因为我不知道它的确切位置。

如有任何问题，请在此处评论，根据您的需要，我会更新我的答案。

Bootstrap header 不会改变图片大小

Bootstrap header will not change the image size

css

flexbox

responsive-design

image-size

bootstrap-4