问如何使用bootstrap设置图像比例/中心？
EN

Stack Overflow用户

提问于 2020-06-29 00:11:07

回答 1查看 22关注 0票数 0

正如您在下面的代码中所看到的，当我调整窗口大小时，图像并没有随之缩放。我不想在调整窗口大小时使图像失真。我想让它的图像中心始终在窗口的中间。就像在手机上一样，我不需要看到图像的蓝色和红色部分，只需要看到中间的中心徽标，并根据这样调整窗口大小，直到其全屏显示英雄形象。我该怎么做呢？我真的找不到任何有关bootstrap的文档。

input{
    border: none;
  border-bottom: 2px solid white;
  
}

::placeholder {
    color: white
}

input[type=text] {
    width: 36%;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    background-color: transparent;
    color: white !important;
  }
  
  input[type=text]:focus {
    width: 50%;
    background-color: transparent;
    color: white !important;
  }

.bg-primary {
    background-color: #000000 !important;
}



.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

.navbar-nav .open .dropdown-menu {
    color: white
}

.navbar {
    background-color: #000000;
  }
  .navbar .navbar-brand {
    color: #ffffff;
  }
  .navbar .navbar-brand:hover,
  .navbar .navbar-brand:focus {
    color: #ededed;
  }
  .navbar .navbar-text {
    color: #ffffff;
  }
  .navbar .navbar-text a {
    color: #ededed;
  }
  .navbar .navbar-text a:hover,
  .navbar .navbar-text a:focus {
    color: #ededed; 
  }
  .navbar .navbar-nav .nav-link {
    color: #ffffff;
    border-radius: .25rem;
    margin: 0 0.25em;
  }
  .navbar .navbar-nav .nav-link:not(.disabled):hover,
  .navbar .navbar-nav .nav-link:not(.disabled):focus {
    color: #ededed;
  }
  .navbar .navbar-nav .dropdown-menu {
    background-color: #000000;
    border-color: #000000;
  }
  .navbar .navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
  .navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
  .navbar .navbar-nav .dropdown-menu .dropdown-item.active {
    color: #ededed;
    background-color: #000000;
  }
  .navbar .navbar-nav .dropdown-menu .dropdown-divider {
    border-top-color: #000000;
  }
  .navbar .navbar-nav .nav-item.active .nav-link,
  .navbar .navbar-nav .nav-item.active .nav-link:hover,
  .navbar .navbar-nav .nav-item.active .nav-link:focus,
  .navbar .navbar-nav .nav-item.show .nav-link,
  .navbar .navbar-nav .nav-item.show .nav-link:hover,
  .navbar .navbar-nav .nav-item.show .nav-link:focus {
    color: #ededed;
    background-color: #000000;
  }
  .navbar .navbar-toggle {
    border-color: #000000;
  }
  .navbar .navbar-toggle:hover,
  .navbar .navbar-toggle:focus {
    background-color: #000000;
  }
  .navbar .navbar-toggle .navbar-toggler-icon {
    color: #ffffff;
  }
  .navbar .navbar-collapse,
  .navbar .navbar-form {
    border-color: #ffffff;
  }
  .navbar .navbar-link {
    color: #ffffff;
  }
  .navbar .navbar-link:hover {
    color: #ededed;
  }
  
  @media (max-width: 575px) {
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #ffffff;
    }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #ededed;
    }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #ededed;
      background-color: #000000;
    }
  }
  
  @media (max-width: 767px) {
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #ffffff;
    }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #ededed;
    }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #ededed;
      background-color: #000000;
    }
  }
  
  @media (max-width: 991px) {
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #ffffff;
    }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #ededed;
    }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #ededed;
      background-color: #000000;
    }
  }
  
  @media (max-width: 1199px) {
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #ffffff;
    }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #ededed;
    }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #ededed;
      background-color: #000000;
    }
  }
  
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ededed;
  }
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ededed;
    background-color: #000000;
  }

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>(Insert Name) Reviews)</title>
    <link rel="icon" type="image/png" sizes="100x100" href="https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png">
</head>

<body>
    <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="index.html"> <img alt="logo" src="https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png" width="30" height="30"></a>
        <input class="mr-auto" type="text" name="search" placeholder="Search...">
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#collapse"
            aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
            </ul>
        </div>
    </nav>


    <div class="container-fluid">
        <div class="row">
                <img class="img-responsive" alt="background" src="https://i.imgur.com/I47YLUI.jpg" style="width:1536px;height:600px;">
            
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

css

bootstrap-4

html

Stack Overflow用户

发布于 2020-06-29 00:16:08

您可以在图像标签上使用img-fluid类，它将根据设备缩放图像，并删除图像上的自定义CSS

bootstrap - responsive-images

票数 0

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62625101

复制

相似问题

问如何使用bootstrap设置图像比例/中心？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用bootstrap设置图像比例/中心？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用bootstrap设置图像比例/中心？
EN