使用CSS bootstrap“Jumbotron”进行图像缩放/调整大小

Question

我有一个看起来很容易解决的问题，我的jumbotron图像没有正确缩放;留下一个相当大的图像（5560×1592）有点模糊：

我的index.html如下：

<div class="jumbotron">
  <div class="container">
    <div class="title">
        <astrobox>astrobox</astrobox>
        <io>.io</io>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
    </div>
    <div class="jumbotron_paragraphs">
        <p><p1>$Supporting /[] Professional_Astronomers<p1></p>
        <p><p2>Serving the research of those studying in the field of astronomy and astrophysics.</p2></p>
        <div class="learn_more">
        <p><a href="#">Learn More</a></p>
        </div>
    </div>
  </div>
</div>

我的CSS是：

.jumbotron {
  background-image:url('https://farm9.staticflickr.com/8679/16635810101_037dda36eb_s.jpg');
  background-color: #000000;
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  top:10px;
}

.jumbotron astrobox {
  color: #fff;
  font-size: 100px;  
  font-family: 'Basic', sans-serif;
  font-weight: bold;
  display: inline;
}

.jumbotron io {
  color: #fff;
  font-size: 48px;  
  font-family: 'Lobster', sans-serif;
  font-weight: bold;
  display: inline;
}

.jumbotron .container p {
  font-size: 13px;
  color: #fff;
  text-align: center;
  font-family: verdana;
}

.jumbotron_paragraphs p1 {
  font-size: 13px;
  color: #fff;
  text-align: center;
  letter-spacing: 4px;
}

.jumbotron_paragraphs p2 {
  font-size: 13px;
  color: #fff;
  text-align: center;
  letter-spacing: 4px;
}

非常感谢任何有关如何执行此操作的提示或提示。

Answer 1

所以flikr在显示图像和托管照片方面似乎很差......他们为什么让他们的服务变得更糟？ Dropbox对于超大屏幕图像效果好100％。

.jumbotron {
    background-image:url('https://dl-web.dropbox.com/get/xxx.jpg?_subject_uid=xxx');
    height: 520px;
    background-repeat: no-repeat;
    background-size: cover
}

.jumbotron .title {
    text-align: center;
}

.jumbotron .container {
    position: relative;
    top:10px;
}

.jumbotron astrobox {
    color: #ffffff;
    font-size: 100px;
    font-family: 'Basic', sans-serif;
    font-weight: bold;
    display: inline;
}

.jumbotron io {
    color: #ffffff;
    font-size: 48px;
    font-family: 'Lobster', sans-serif;
    font-weight: bold;
    display: inline;
}

.jumbotron .container p {
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    font-family: 'Droid Sans', sans-serif;
}

.jumbotron_paragraphs p1 {
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    letter-spacing: 4px;
}

.jumbotron_paragraphs p2 {
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    letter-spacing: 4px;
}

.jumbotron_paragraphs .jumbotron_image {
    padding-bottom: 0px;
    margin-bottom: 5px;
}