如何在导航栏 html + css 中使图像响应

Question

我正在使用此代码

<div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <div class="d-flex flex-row justify-content-center align-items-center">
        <a class="navbar-brand" href="#">
          <img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="width:12%;height:auto; float: left;">
          <h1 style="color: #89216b; float: right; margin-top: auto; margin-bottom: auto; font-size: all;">Trendings</h1>
        </a>
      </div>
    </div>
  </nav>
</div>

一切都很完美，但是当我在移动设备上看到它时，图像尺寸很小，文字尺寸保持不变，我只是希望图像尺寸不会太小

Answer 1

当您在 img 中使用 width:12% 时，它会自动缩小图像。所以我建议你删除该代码并改用这个代码；

.navbar-brand{
  width:100%;
  height:auto;  
}
.img-logo{
  max-width:100%;
  height:auto;
  object-fit:cover;
}

也在你的 html 中；（我删除了样式中的 width 和 height）

<img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="float: left;">

Answer 2

根据你所拥有的，.. 你正在使用一些 css 框架，因为你有：

d-flex flex-row etc

如果是这样，为什么要使用内联样式？ ...无论如何，如果您要设置任何样式然后编辑图像：

.img-logo {
 width: 100%;
 height: auto;
 max-width: 100px;
}

或内联...

<img class="img-logo" src="img" alt="" loading="lazy" style="
    width: 100%;
    height: auto;
    max-width: 100px;
">

100px 只是我的例子，你可以根据自己的意愿做正确的尺寸。这将是您的图像样式，因此它可以在任何尺寸下看起来都很好。