Question

我有一个很大的透明徽标，我把它放在我下载的主题附带的旧徽标的位置，但它不会根据导航栏缩放

我可以减少Photoshop中徽标的大小，但我觉得这不是解决此问题的最佳方法

这是我对徽标的代码

#include <functional>
#include <string>
#include <memory>
#include <map>
#include <iostream>

struct IREGISTRY {
    virtual ~IREGISTRY() {}
    virtual void print() = 0;
};

struct REGISTRY_XML : IREGISTRY { void print() override { std::cout << "XML\n"; } };
struct REGISTRY_INI : IREGISTRY { void print() override { std::cout << "INI\n"; } };
struct REGISTRY_JSON : IREGISTRY { void print() override { std::cout << "JSON\n"; } };

int main()
{
    std::map<std::string, std::function<std::unique_ptr<IREGISTRY>()>> const registry_list = {
        { "xml", []() { return std::make_unique<REGISTRY_XML>(); } },
        { "ini", []() { return std::make_unique<REGISTRY_INI>(); } },
        { "json", []() { return std::make_unique<REGISTRY_JSON>(); } },
    };

    auto const initializer_iter = registry_list.find("xml");
    if (initializer_iter != registry_list.end())
    {
        auto const initializer = initializer_iter->second;
        auto const registry_ptr = initializer();
        registry_ptr->print();
    }
}

如何修复徽标以使其适合我的导航栏..

这是我的整个导航栏html

<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a></div>

Answer 1

一般来说，无论何时你正在玩图像的拟合，这些都是你正在寻找的四个CSS属性。

.img-responsive {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 250px;
}

在我的代码段中，我们告诉图片自动调整大小。除非另有明确说明，否则<img>代码会尝试保留宽高比。两个max-属性决定了我们想要的最大尺寸。例如，如果我们上传宽度为300像素，高度为72像素的图像，它最终将小于我们的最大高度，宽度为250像素。

要垂直居中图像，您需要执行以下操作：

line-height: 72px; /* whatever the fixed height of the bar is */
vertical-align: middle;

如果您的图片是导航栏的确切高度，请尝试使用vertical-align: top，如果它看起来没有。

如何使我的徽标适合我的导航栏？

1 个答案: