Question

我正在尝试使用引导程序创建两列-右侧为文本，左侧为照片。我希望照片填满左侧的整个白屏，但要以100％的宽度填充，图像会自动填充多少。我该如何更改？

我是HTML + CSS的新手，这是一项任务，因此任何技巧都将有所帮助。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="css/style.css" rel="stylesheet">

  <link rel="icon" type="image/png" sizes="16x16" href="img\favicon.ico">
  <title>Headspace</title>

</head>

<body>

  <div id="barAtTop"></div>

  <div class="site_title">
    <h1>HEADSPACE</h1>
  </div>

  <div class="motto" style="font-size:1vw;">
    <i>"To empower young people to have the confidence and skills to gain meaningful employment."</i>
  </div>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" onclick="openDropDown()">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                        
                    </button>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a>Home</a></li>
          <li><a href="about.html">About us</a></li>
          <li><a href="contact.html">Contact us</a></li>
          <li><a href="team.html">Meet the Team</a></li>
          <li><a href="join.html">Join Now</a></li>
        </ul>
      </div>

    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-sm-6" id="main-page-image">
        <img src="img\teenager.jpg" style="max-width:100%;height:auto;">
      </div>

      <div class="col-sm-6" id="about-headspace">
        <h1>ABOUT HEADSPACE</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vel tortor eu ultrices. Suspendisse id luctus lorem. Donec sed fringilla odio. Morbi tristique luctus euismod. Morbi et lectus sed tortor pulvinar pulvinar cursus id turpis. Vestibulum
          eu elit erat.
        </p>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您的图片不能超出其内部的父元素。因此，当您将映像放在“ col-sm-6”中时，这会将其大小限制为其父容器的大小。解决方案是将图像放在较大的父元素中。

Answer 2

~~如果我理解正确的问题，图像是否没有填充col-sm-6元素？~~

~~尝试将max-width更改为width。示例：~~

~~<img src="img\teenager.jpg" style="width:100%;height:auto;">~~

使用一个自定义的行类并对其样式进行伸缩，以使其填充。然后，我们可以简单地为图像本身添加对象适合度。

.card-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#main-page-image {
  overflow:hidden;
}

#main-page-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row card-container">
    <div class="col-xs-6" id="main-page-image">
      <img src="http://via.placeholder.com/640x360">
    </div>

    <div class="col-xs-6" id="about-headspace">
      <h1>ABOUT HEADSPACE</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vel tortor eu ultrices. Suspendisse id luctus lorem. Donec sed fringilla odio. Morbi tristique luctus euismod. Morbi et lectus sed tortor pulvinar pulvinar cursus id turpis. Vestibulum
        eu elit erat.
      </p>
    </div>
  </div>
</div>

Bootstrap调整我的原始图片大小-我希望它保持原样

2 个答案: