html - 使用 CSS bootstrap "Jumbotron"图像重新缩放/调整大小

Question

我遇到了一个看起来很容易解决的问题，我的超大屏幕图像没有正确缩放；留下一个相当大的图像(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;
}