Question

这是我的第一篇文章，我试图修复我的CSS。我有一个.jumbotron（Bootstrap），我的形象太大了。由于人们拥有不同大小的屏幕，因此重新调整尺寸并不会起作用。这是代码。

＆＃13;

.jumbotron {
	background-image: url('SONUBANNER.png');
	height: 500px;
	width: auto;
	margin-top: 5rem;
}

＆＃13;

<!DOCTYPE html>
<html>      
        <head>
        </head>
        <body>
                <section class="jumbotron">
                        <div class="container">
                        </div>
                </section>
        </body>
</html>

＆＃13;

我尝试使用min-width：CSS选择器，但效果相同。我不想让我的观众滚动查看.jumbotron的其余部分。有谁能告诉我修复？

Answer 1

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.jumbotron {
  height: 500px;
  display: flex;
  align-items: center;
  background: url("SONUBANNER.png") center center;
  background-size: cover;
  margin-top: 5rem;
}

＆＃13;

 <div class="jumbotron">
    
</div>

＆＃13;

Answer 2

如果要使用CSS类添加图像，则无法使用Bootstrap中的所有功能。只需使用随附的引导功能。将图像添加到renderer.setBaseToolTipGenerator(new StandardCategoryToolTipGenerator() { @Override public String generateToolTip(CategoryDataset dataset, int row, int column) { String s = super.generateToolTip(dataset, row, column); int b = s.indexOf('(', 1) + 1; int e = s.indexOf(')'); return s.substring(b, e); } });类。

img-responsive

.jumbotron {
	height: 500px;
	width: auto;
	margin-top: 5rem;
}

图像对于jumbotron来说太大了

2 个答案: