圖像重新縮放/ CSS自舉大小「Jumbotron」

我有什麼似乎是一個很容易解決的問題，我的jumbotron圖像沒有正確縮放;留下了相當大的圖像（5560×1592）有點模糊：圖像重新縮放/ CSS自舉大小「Jumbotron」

enter image description here

我的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; 
}

任何提示或提示如何做到這一點將不勝感激。

來源

2015-02-24 Michael Roberts

你能詳細說明你期待的結果嗎？在你的CSS引用的圖像只有75x75px而不是5560x1592px ...擬合成一個大的div肯定會導致pixelmania。也許我誤解了你的問題。 – pschueller 2015-02-24 21:20:25

是的，我剛剛看到了。 flikr曾經是有用的！什麼是在線存儲圖像的最佳地點？ – 2015-02-24 21:26:17

因此flikr在顯示圖像和託管照片方面似乎很差......他們爲什麼讓自己的服務變得更糟？ Dropbox是jumbotron圖像的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; 
}

來源

2015-02-28 10:58:20

圖像重新縮放/ CSS自舉大小「Jumbotron」

回答

相關問題