我的形象延伸出了超大號，我如何在超大號中完美地融入它？

我有以下的CSS & HTML：圖片伸過超大屏幕，我希望它完全適合它的超大屏幕完美我的形象延伸出了超大號，我如何在超大號中完美地融入它？

body { 
 
    margin-top: 60px; 
 
} 
 
.quote { 
 
    font-family: lobster, monospace; 
 
} 
 
.jumbotron { 
 
    background-size: auto 100%; 
 
}

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 

 
<div class="container-fluid"> 
 
    <div class="jumbotron"> 
 
    <h1 class="text-primary text-center">Wolverine:</h1> 
 
    <h2 class="text-center"><em>Weapon-X</em></h2> 
 
    <img class="img-responsive" src="http://s.marketwatch.com/public/resources/MWimages/MW-FH148_LoganM_ZG_20170302111413.jpg"> 
 
    <div class="caption">The Ultimate Killing Machine</div> 
 
    <br> 
 
    <ul type="none"> 
 
     <li>Candian</li> 
 
     <li>Veteran</li> 
 
     <li>Mutant</li> 
 
    </ul> 
 
    <p class="quote">"I'm the best at what I do, and what I do isn't very nice"</p> 
 
    <br> 
 
    <p>- Logan</p> 
 
    <h3> Read more at <a href="https://en.wikipedia.org/wiki/Wolverine_(character)" target="blank"> at wikipedia</a></h3> 
 
     </div> 
 
    <p class="text-center text-danger">Authored by Pranav Reddy</p> 
 
</div>

來源

2017-05-31 Pranav Reddy Kanthala

歡迎的StackOverflow，你的問題應該包含一個[**最小的，完整的和可驗證的實例**]（http://stackoverflow.com/help/mcve）。當我將Bootstrap應用於您的標記時，圖像保持與jumbotron一致。 – hungerstar

你確定嗎？我在Chrome，IE，Edge，不同的屏幕尺寸上進行了測試，它看起來很好並且居中 –

添加.jumbotron { padding: 0}的CSS。

下面是摘錄：

body { 
 
    margin-top: 60px; 
 
} 
 
.quote { 
 
    font-family: lobster, monospace; 
 
} 
 
.jumbotron { 
 
    padding: 0; 
 
}

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 

 
<div class="container-fluid"> 
 
    <div class="jumbotron"> 
 
    <h1 class="text-primary text-center">Wolverine:</h1> 
 
    <h2 class="text-center"><em>Weapon-X</em></h2> 
 
    <img class="img-responsive" src="http://s.marketwatch.com/public/resources/MWimages/MW-FH148_LoganM_ZG_20170302111413.jpg"> 
 
    <div class="caption">The Ultimate Killing Machine</div> 
 
    <br> 
 
    <ul type="none"> 
 
     <li>Candian</li> 
 
     <li>Veteran</li> 
 
     <li>Mutant</li> 
 
    </ul> 
 
    <p class="quote">"I'm the best at what I do, and what I do isn't very nice"</p> 
 
    <br> 
 
    <p>- Logan</p> 
 
    <h3> Read more at <a href="https://en.wikipedia.org/wiki/Wolverine_(character)" target="blank"> at wikipedia</a></h3> 
 
     </div> 
 
    <p class="text-center text-danger">Authored by Pranav Reddy</p> 
 
</div>

或者更簡單的方法，我認爲你是使用自舉，就是超大屏幕流體類添加到超大屏幕的div像這樣：<div class="jumbotron jumbotron-fluid">

來源

2017-05-31 17:22:26 wired

你需要設置background-size: 100% 100%;您jumbotron

body { 
 
    margin-top: 60px; 
 
} 
 
.quote { 
 
    font-family: lobster, monospace; 
 
} 
 
.jumbotron {background-size: 100% 100%; }

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 

 
<div class="container-fluid"> 
 
    <div class="jumbotron"> 
 
    <h1 class="text-primary text-center">Wolverine:</h1> 
 
    <h2 class="text-center"><em>Weapon-X</em></h2> 
 
    <img class="img-responsive" src="http://s.marketwatch.com/public/resources/MWimages/MW-FH148_LoganM_ZG_20170302111413.jpg"> 
 
    <div class="caption">The Ultimate Killing Machine</div> 
 
    <br> 
 
    <ul type="none"> 
 
     <li>Candian</li> 
 
     <li>Veteran</li> 
 
     <li>Mutant</li> 
 
    </ul> 
 
    <p class="quote">"I'm the best at what I do, and what I do isn't very nice"</p> 
 
    <br> 
 
    <p>- Logan</p> 
 
    <h3> Read more at <a href="https://en.wikipedia.org/wiki/Wolverine_(character)" target="blank"> at wikipedia</a></h3> 
 
     </div> 
 
    <p class="text-center text-danger">Authored by Pranav Reddy</p> 
 
</div>

來源

2017-05-31 18:15:40

我的形象延伸出了超大號，我如何在超大號中完美地融入它？

回答

相關問題