Bootstrap 调整我的原始图像的大小 - 我希望它保持原来的样子答案

【问题标题】：Bootstrap resizes my original image - I want it to stay how it originally isBootstrap 调整我的原始图像的大小 - 我希望它保持原来的样子
【发布时间】：2019-11-28 00:58:59
【问题描述】：

我正在尝试使用引导程序制作两列 - 右侧为文本，左侧为照片。我希望照片填满左侧的整个白色屏幕，但 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

【解决方案1】：

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

【讨论】：

如何将它放在更大的父元素中，但仍然可以通过引导程序调整大小？

【解决方案2】：

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

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

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

使用自定义的行类并设置样式，使其弯曲和拉伸以填充列。然后我们可以简单地为图像本身添加 object-fit。

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

【讨论】：

所做的编辑。我想这就是你要找的。列和主父容器上仍有一些填充，可能会导致一些不需要的空白。如果您愿意，只需将它们设置为 padding: 0;。