如何自动调整图像大小以适应引导程序 4 中的容器？答案

【问题标题】：How to auto resize image to fit a container in bootstrap 4?如何自动调整图像大小以适应引导程序 4 中的容器？
【发布时间】：2020-01-04 11:28:31
【问题描述】：

当原始图像具有不同尺寸时，我希望两张图片为一种尺寸 - 引导 col-6 的尺寸。

我试过这段代码：

<div class="container">
    <div class="row"> 
      <div class="col-6">
          <img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="img-fluid" alt="Responsive image">
          <h3><a href="#">project name</a></h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
      </div>
      <div class="col-6">
          <img src="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img-fluid" alt="Responsive image">
          <h3><a href="#">project name</a></h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
      </div>
    </div>
    </div>

但它没有工作。我该怎么办？

【问题讨论】：

标签： html image containers autoresize

【解决方案1】：

您是否尝试将 width=100% 添加到 img 标签？

另一种选择是在您的 css 文件中向 col-6 类添加标签定义： img.col-6{宽度:100%;}

【讨论】：

我建议不要在答案中使用修辞问题。他们冒着被误解为根本不是答案的风险。您正在尝试回答此页面顶部的问题，不是吗？否则请删除此帖。
请将本文的第一部分表述为有条件的解释性答案，以避免给人一种提出澄清问题而不是回答的印象（应该使用评论而不是答案，比较@ 987654321@）。例如像“如果你的问题是......那么解决方案是......因为......。”
到第二部分：虽然这段代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。

【解决方案2】：

您可以通过简单地添加 style="width:400px;height:300px;" 来重新调整图像大小在图像标签的末尾，您可以将每个图像的像素更改为您喜欢的大小。

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title> </title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>


<body>


  <div class="container">

    <div class="row">
      <div class="col-6"> <img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="img-fluid" alt="Responsive image" style="width:400px;height:300px;"></div>


      <div class="col-6"> <img src="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=40" class="img-fluid" alt="Responsive image" style="width:400px;height:300px;"> </div>
    </div>


  </div>




  <div class="container">
    <div class="row">
      <div class="col-6">
        <h3><a href="#">project name</a></h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
      </div>


      <div class="col-6">
        <h3><a href="#">project name</a></h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
      </div>
    </div>
  </div>



</body>

</html>

【讨论】：