Question

我试图用bootstrap复制以下图片

如果您想查看https://slack.com/create#teamname，请点击此链接图像确实适合整个页面，即使向下滚动，它也不会显示任何额外的图片，而我的确有。

我的尝试是

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

我在图片中添加了一些自定义css

 img {
    width:100%;
    height:730px;
}

我得到了以下结果

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

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

这是JSFIDDLE - ＆gt; https://jsfiddle.net/3soreoac/

Answer 1

http://codepen.io/anon/pen/wKQQxb

<div class="left col-md-6"></div>
<div class="right col-md-6"><img class="full" src="https://slack.global.ssl.fastly.net/66f9/img/signup/step1-illi@2x.png"></div>


 .rightfull {
  width: 100vh;
  height: 100vh;
}
.left {
  background-color: blue;
}
.right {
  background-color: green;
}

Answer 2

这可能会有所帮助

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

<强> CSS

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

小提琴：here

如何将图像拟合到bootstrap div =＆＃34; col-md＆＃34;？

2 个答案: