时间戳

首页 > 解决方案 > 如何在导航栏 html + css 中使图像响应

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

问题描述

我正在使用此代码

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

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

标签： javascripthtmlcssbootstrap-4

解决方案

当您在img中使用width:12%时，它会自动使图像变小。因此，我建议您删除该代码并改用该代码；

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

同样在您的 html 中；（我删除了样式中的宽度和高度）


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

推荐阅读