html - bootstrap “Header/Jumbotron”

我正在使用以下代码为网页创建标题“徽标”：

<header>
    <div class="jumbotron">
        <!-- insert logo here -->
    </div>
</header>

通常，制作图像的最佳方式/分辨率是什么，以使其始终适合整个超大屏幕，但缩小到手机/平板电脑尺寸时不会变形太多？另外，一旦我制作完图像并将其src保存在“在此处插入徽标”的位置，是否可以使用CSS来解决此问题？

最佳答案

如果您只是试图使图像占据整个jumbotron，则可以对<img>应用一个类，例如.image并使用CSS对其进行样式设置：

.image {
  width: 100%;
  height: auto;
}

您仍然会从jumbotron类中看到一些背景，因此我建议添加以下内容：

.jumbotron {
  padding:0;
}

至于响应能力，以便您知道将来的需求，可以使用@media来为不同的屏幕尺寸操纵某些类或标签。例：

@media all and (max-width: 500px) {

    .image {
        width: 75%;
    }
}

这意味着对于小于或等于.image的任何屏幕尺寸，所有500px类的宽度将为75％。

关于html - bootstrap “Header/Jumbotron”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45421627/