我的形象是从超大屏幕延伸出来的，我如何在jumbotron中完美地适应它？

Question

我有以下css＆amp; HTML： 图像延伸超过了jumbotron，我希望它完美地适应它在jumbotron中的完美

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将.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>

或者更简单的方法，我假设您使用的是Bootstrap，就是将jumbotron-fluid类添加到jumbotron div中，如下所示：<div class="jumbotron jumbotron-fluid">

Answer 2

您需要将background-size: 100% 100%;设置为jumbotron

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;