网格图像响应式且无填充答案

【问题标题】：grid image responsive and without padding网格图像响应式且无填充
【发布时间】：2018-09-02 00:41:16
【问题描述】：

我需要“构建”一个由不同部分组成的图像。这里有一个架构：

每幅图像之间没有空格或填充，如果整个图像都具有响应性，那就太好了……有什么想法吗？我试过了，但图像失去了响应性：

     echo '<div id="top_testa" style="overflow: hidden; ">
     <div class="image-div" style="float:right;margin-left:0px;max-width: 
    20%;max-height: 20%;" >

          </div>
      <div class="image-div" style="float:right;margin-right:8.5%;max-width: 
   20%;max-height: 20%;" >
   <img 
 src="TestaLuc.png" id="top_head" name="top_head">
  </div>

  <div class="image-div" style="float:left;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style="clear:right;"></div>
</div>';
echo '<div id="base_testa" style="overflow: hidden; ">
  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class="image-div" style="float:right;margin-right:8.5%;max-width: 20%;max-height: 20%;" >
   <img src="BaseTestaMim.png" id="bottom_head" name="bottom_head">
  </div>

  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style="clear:right;"></div>
</div>';
echo '<div id="asta" style="overflow: hidden; ">
  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class="image-div" style="float:right;margin-right:8.6%;max-width: 20%;max-height: 20%;" >
   <img src="AstSupNull.png" id="top_asta" name="top_asta">
  </div>

  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style="clear:right;"></div>
</div>';

echo '<div id="middle" style="overflow: hidden; ">
  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class="image-div" style="float:right;margin-right:13.3%;max-width: 20%;max-height: 20%;" >
   <img src="AstInfLuc.png" id="bottom_left_asta" name="bottom_left_asta" align="right">
  </div>

谢谢

【问题讨论】：

关于您的代码：在编写所有 HTML 之前关闭 PHP 标记，您的代码会更易于阅读。并缩进你的 HTML。

标签： html image web responsive-design

【解决方案1】：

对 Bootstrap 行使用 no-gutters 类以删除填充，对图像使用 img-fluid 类以使其具有响应性。

这是一个工作代码 sn-p：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-4">
            <img class="img-fluid" src="https://placeimg.com/940/400/animals" alt="">
        </div>
        <div class="col-4">
            <img class="img-fluid" src="https://placeimg.com/940/400/arch" alt="">
        </div>
        <div class="col-4">
            <img class="img-fluid" src="https://placeimg.com/940/400/tech" alt="">
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-6">
            <img class="img-fluid" src="https://placeimg.com/940/400/nature" alt="">
        </div>
        <div class="col-6">
            <img class="img-fluid" src="https://placeimg.com/940/400/people" alt="">
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-12">
            <img class="img-fluid" src="https://placeimg.com/1240/200/any" alt="">
        </div>
    </div>
</div>

【讨论】：

“col-4”不起作用，“col-md-4”起作用，“no-gutter”不起作用。我需要什么版本的引导程序？
与您用于此问题的标签相同的版本，与我的 sn-p 中链接的 css 相同。
好的，但是如果我不能使用 bootstrap 4？
那我要删除我的答案了。
搞错了，抱歉

【解决方案2】：

您需要使用 100% 宽度标签设置响应式

<img src="img.jpg" width="100%">

【讨论】：