使多组图像和段落在列内响应

Question

所以我有多个带有图像的 divs 和另一组带有 p 标签（只有数字）的 divs，它们构成了牙列图（一组牙齿及其对应的数字）长度为 8 的列，然后它位于 boostrap 卡内。每张图片包含一个div

这是全部代码https://codepen.io/luzsdx/pen/ExKqwXP 这是一个示例

<div class="row ">
<div class="col-md-8 odontograma">
    <div class="card">
        <div class="card-body">
            <br>
            <div class="pieceRow1">
                <p class="pieza18" id="pieza18">18</p>
                <p class="pieza17" id="pieza17">17</p>
                <p class="pieza16" id="pieza16">16</p>
                <p class="pieza15" id="pieza15">15</p>
                <p class="pieza14" id="pieza14">14</p>
                <p class="pieza13" id="pieza13">13</p>
                <p class="pieza12" id="pieza12">12</p>
                <p class="pieza11" id="pieza11">11</p>
                <p class="pieza21" id="pieza21">21</p>
                <p class="pieza22" id="pieza22">22</p>
                <p class="pieza23" id="pieza23">23</p>
                <p class="pieza24" id="pieza24">24</p>
                <p class="pieza25" id="pieza25">25</p>
                <p class="pieza26" id="pieza26">26</p>
                <p class="pieza27" id="pieza27">27</p>
                <p class="pieza28" id="pieza28">28</p>
            </div>
            <div class="fila1 d-flex justify-content-center">
                <div class="pieza18" id="img18"><img class="diente18" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>
                <div class="pieza17" id="img017"><img class="diente17" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza16" id="img17"><img class="diente16" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza15" id="img15"><img class="diente15" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza14" id="img14"><img class="diente14" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza13" id="img13"><img class="diente13" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza12" id="img12"><img class="diente12" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza11" id="img11"><img class="diente11" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>

                <div class="mr-3 ml-3"></div>
                <div class="pieza21" id="img21"><img class="diente21" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza22" id="img22"><img class="diente22" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza23" id="img23"><img class="diente23" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza24" id="img24"><img class="diente24" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza25" id="img25"><img class="diente25" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza26" id="img26"><img class="diente26" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza27" id="img27"><img class="diente27" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
                <div class="mr-3"></div>

                <div class="pieza28" id="img28"><img class="diente28" src="../../imagenes/caraDentalVacia.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

我试图将 class 'img-fluid' 放在 img 中，但这会使它们变小并且不会使它们响应。有没有办法让数字图像在 bootstrap 或 css 的列内响应？

Answer 1

好吧，如果您真的想要使用 HTML 和 CSS 完成 Ontogramm，而不是使用 graphic/image，那么网格可以做到这一点。但是，此网格需要 min-width 的 720px 才能正确显示。在此之下，您遇到的问题完全取决于尺寸。它应该适应屏幕尺寸并自行扩展到其全宽。

body {
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  grid-auto-rows: auto;
  grid-gap: 2px;
  padding: 2px;
  text-align: center;
}

div {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  object-fit: contain;
}

<body>
  <!-- 1st Row -->
  <div>18</div>
  <div>17</div>
  <div>16</div>
  <div>15</div>
  <div>14</div>
  <div>13</div>
  <div>12</div>
  <div>11</div>
  <div></div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
  <div>25</div>
  <div>26</div>
  <div>27</div>
  <div>28</div> 

  <!-- 2nd Row -->
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  
  <!-- 3rd Row -->
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  
  <!-- 4th Row -->
  <div>48</div>
  <div>47</div>
  <div>46</div>
  <div>45</div>
  <div>44</div>
  <div>43</div>
  <div>42</div>
  <div>41</div>
  <div></div>
  <div>31</div>
  <div>32</div>
  <div>33</div>
  <div>34</div>
  <div>35</div>
  <div>36</div>
  <div>37</div>
  <div>38</div> 
  
  <!-- 5th Row -->
  <div></div>
  <div></div>
  <div></div>
  <div>55</div>
  <div>54</div>
  <div>53</div>
  <div>52</div>
  <div>51</div>
  <div></div>
  <div>61</div>
  <div>62</div>
  <div>63</div>
  <div>64</div>
  <div>65</div>
  <div></div>
  <div></div>
  <div></div> 

  <!-- 6th Row -->
  <div></div>
  <div></div>
  <div></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div></div>
  <div></div>
  <div></div>
  
  <!-- 7th Row -->
  <div></div>
  <div></div>
  <div></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
  <div></div>
  <div></div>
  <div></div>
  
  <!-- 8th Row -->
  <div></div>
  <div></div>
  <div></div>
  <div>85</div>
  <div>84</div>
  <div>83</div>
  <div>82</div>
  <div>81</div>
  <div></div>
  <div>71</div>
  <div>72</div>
  <div>73</div>
  <div>74</div>
  <div>75</div>
  <div></div>
  <div></div>
  <div></div>
</body>

使多组图像和段落在列内响应

make multiple groups of images and paragraphs responsive inside a column

html

css

image

bootstrap-4

responsive