Question

说明

我正在尝试在Github's site底部重新创建徽标展示（只有在签名时才会显示）。检查时，徽标的大小会根据屏幕分辨率而变化（如下所示），但在我的代码中（我试图与Github最相似）没有任何反应;它对于每个分辨率都保持相同的大小。

代码

由于我正在使用不支持flexbox的Bootstrap 3.3.7（至少在将特定的css编写为html类时没有用），我不得不编写css。

.logos {
    background-color: rgb(255, 255, 255);
    padding: 0;
}

.logos .text-center {
    box-sizing: border-box;
    display: block;
}

.logos ul {
    text-align: center;
    filter: grayscale() !important;
    display: flex !important;
    list-style: none;
    -webkit-box-pack: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding-left: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.logos li {
    display: list-item;
    text-align: -webkit-match-parent;
    box-sizing: border-box;
}

.logos .logo-img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 10px 20px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <section class="logos">
            <div class="container">
                <div class="row">

                    <div class="text-center">
                        <ul>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/UPabVoZ.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/UPabVoZ.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/sT2RPP2.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/UPabVoZ.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/sT2RPP2.png" alt=""></a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>
        
        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

提前致谢，
路易斯。

Answer 1

我建议使用媒体查询来帮助调整特定屏幕尺寸的图像大小。这是一个例子：

CSS

@media (max-width: 768px /* Or whatever you want */) {
   .logos .logo-image {
      width: 100px; /* Once again, whatever you want */
   }
}

以下是解释媒体查询的链接：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

祝你好运！

Answer 2

您可以使用图片元素。见here

Answer 3

首先摆脱所有引导程序，因为它丑陋且令人困惑，你可以在没有它的情况下摆脱3个额外的容器div，它显然不支持flexbox吗？（Bootstrap 4应该使用它，如果它已经出来，我不知道，因为如果你不能告诉我不想使用Bootstrap）然后使用flexbox并将img设置为max-width: 100%;以保持纵横比。根据需要使用justify-content搞清楚：

＆＃13;

.logos {
  dislay: flex;
  flex-direction: column;
}

.top-logos {
  display: flex;
  justify-content: center;
}

.bottom-logos {
  display: flex;
  justify-content: space-around;
}

img {
  max-width: 100%;
}

＆＃13;

<section class="logos">
  <div class="top-logos">
    <a href="#"><img class="logo-img large" src="http://i.imgur.com/UPabVoZ.png" alt=""></a>
    <a href="#"><img class="logo-img large" src="http://i.imgur.com/UPabVoZ.png" alt=""></a>
    <a href="#"><img class="logo-img small" src="http://i.imgur.com/sT2RPP2.png" alt=""></a>
  </div>
  <div class="bottom-logos">
    <a href="#"><img class="logo-img large" src="http://i.imgur.com/UPabVoZ.png" alt=""></a>
    <a href="#"><img class="logo-img small" src="http://i.imgur.com/sT2RPP2.png" alt=""></a>
  </div>
</section>

＆＃13;

重新创建Github的响应式徽标展示

说明

代码

3 个答案: