图像重新缩放/ 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”

回答

相关问题