时间戳

首页 > 解决方案 > 引导标头不会更改图像大小

css - 引导标头不会更改图像大小

问题描述

我迫切地想要完成这项工作，但我不确定我在做什么了。由于某种原因，小视口中的图像比它们在大视口中的外观小，所以我很难过。

    <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 之间

标志的标题如下：

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

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

任何帮助将不胜感激

标签： cssbootstrap-4flexboxresponsive-designimage-size

解决方案

从您编写代码的方式来看，我知道您的问题出在较小的屏幕上，因此根据您所拥有的内容，我编写了以下代码：

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 中使用了 150 像素能够举例说明。请注意，我使用object-fit: cover图像来保持其比例并填充提供的尺寸。但是在这里可以裁剪图像以适合。但是，如果您想不惜一切代价扩展它们，您可以使用width: 100vw; object-fit: fill;

关于这个特定的图像问题，我建议您查看 W3 Schools 的此链接：CSS The object-fit Property。

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

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

推荐阅读