Bootstrap调整我的原始图像大小-我希望它保持原始状态

问题描述 投票：0回答：2

我正在尝试使用引导程序创建两列-右侧为文本，左侧为照片。我希望照片填满左侧的整个白屏，但要以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>
html twitter-bootstrap twitter-bootstrap-3
2个回答
0
投票

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

0
投票

如果我理解正确的问题，图像未填充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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.