Css 如何将映像适配到引导div="；col md"；？_Css_Twitter Bootstrap

Css 如何将映像适配到引导div="；col md"；？

css twitter-bootstrap

Css 如何将映像适配到引导div="；col md"；？,css,twitter-bootstrap,Css,Twitter Bootstrap,我正试图用引导复制下面的图片这是链接，如果你想看的话图像确实适合整个页面，即使你向下滚动，它也不会显示任何额外的图片，而我的确实有我的尝试是 <body> <div class="container"> <div id="Page1"> <h1>Full Name</h1> <div class="row"> <div class="col-md-5">

我正试图用引导复制下面的图片

这是链接，如果你想看的话图像确实适合整个页面，即使你向下滚动，它也不会显示任何额外的图片，而我的确实有

我的尝试是

<body>

<div class="container">

<div id="Page1">
      <h1>Full Name</h1>
      <div class="row">
        <div class="col-md-5">
          <h1></h1>
          <form>
            <input type="text" placeholder="Enter your Full Name" class="form-control">
            <a href="#" class="btn btn-primary">Show page 2</a>
          </form>
        </div>
      <div class="col-md-7">

        <img src="/img/space.jpg">

      </div>
      </div>
    </div>
  </div>
 </body>

我得到了以下结果

如何匹配代码中的第一张图片

我不是一个前端的人，如果有人能帮助我，我会很有帮助的

这是JSFIDLE-->


.对{
宽度：100vh；
高度：100vh；
}
.左{
背景颜色：蓝色；
}
.对{
背景颜色：绿色；
}


.对{
宽度：100vh；
高度：100vh；
}
.左{
背景颜色：蓝色；
}
.对{
背景颜色：绿色；
}

这可能会有所帮助

HTML

<div class="container">
    <div id="Page1">
        <div class="row">
            <div class="col-md-5 col-xs-5 leftpanel">
                 <h1>Full Name</h1>

                <form>
                    <input type="text" placeholder="Enter your Full Name" class="form-control"> <a href="#" class="btn btn-primary">Show page 2</a>

                </form>
            </div>
            <div class="col-md-7 col-xs-7">
                <img src="https://metrouk2.files.wordpress.com/2014/01/459405755-e1389347715754.jpg">
            </div>
        </div>
    </div>
</div>

小提琴：这可能会有帮助

HTML

<div class="container">
    <div id="Page1">
        <div class="row">
            <div class="col-md-5 col-xs-5 leftpanel">
                 <h1>Full Name</h1>

                <form>
                    <input type="text" placeholder="Enter your Full Name" class="form-control"> <a href="#" class="btn btn-primary">Show page 2</a>

                </form>
            </div>
            <div class="col-md-7 col-xs-7">
                <img src="https://metrouk2.files.wordpress.com/2014/01/459405755-e1389347715754.jpg">
            </div>
        </div>
    </div>
</div>

Fiddle:

请提供JSFIDLE。@alirezasafian已经添加了JSFIDLE请提供JSFIDLE。@alirezasafian已经添加了JSFIDLE rightfull？它不起作用，完全没有反应？如果你看你提到的网站，他们使用单面板来缩小屏幕如果你看你提到的网站，他们使用单面板来缩小屏幕

<div class="container">
    <div id="Page1">
        <div class="row">
            <div class="col-md-5 col-xs-5 leftpanel">
                 <h1>Full Name</h1>

                <form>
                    <input type="text" placeholder="Enter your Full Name" class="form-control"> <a href="#" class="btn btn-primary">Show page 2</a>

                </form>
            </div>
            <div class="col-md-7 col-xs-7">
                <img src="https://metrouk2.files.wordpress.com/2014/01/459405755-e1389347715754.jpg">
            </div>
        </div>
    </div>
</div>

img{
    width:100%;
    height:732px;
}
.leftpanel{
    background-color:grey;
    height:732px;
}