Question

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

图像的每个部分之间没有空格或填充，如果整个图像都是响应的话会很好......任何想法？我尝试了这个，但图像失去了响应度：

     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>

由于

Answer 1

使用Bootstrap行的no-gutters类删除填充和图像的img-fluid类，以使其响应。

这是一个有效的代码片段：

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

Answer 2

您需要使用100％宽度标记设置响应

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

网格图像响应和没有填充

2 个答案: