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

【问题标题】：make multiple groups of images and paragraphs responsive inside a column使多组图像和段落在列内响应
【发布时间】：2021-01-19 03:34:12
【问题描述】：

所以我有多个带有图像的 div 和另一组带有 p 标签（只有数字）的 div，它们在长度为 8 的列内构成齿形图（一组具有相应数字的牙齿），然后它在里面一张助推卡。每个图像都包含一个 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>

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

【问题讨论】：

  • 很难得到像这样完全响应的东西。实际上最好使用响应式的简单图片。但是，如果您想至少做到桌面响应，我强烈建议您使用 CSS-Grid。
  • 但是如果我想让它像示例一样显示，我怎么能只使用一张图片呢？对不起，我可能不明白，至于css网格我会搜索
  • 好吧，不要用 CSS 创建 ontrogramm，绘制/创建要显示的 ontrogram 的图片。问题是，一列有 16 颗牙齿，大小为 42 像素。因此，仅凭这一点，您就有 600 像素的最小宽度。如果低于该值，则必须严重缩小图像的大小。否则它不会保持完全响应
  • 但问题是我必须处理图像，例如替换另一张但全是蓝色的图像。

标签： html css image bootstrap-4 responsive


【解决方案1】：

好吧，如果您真的想要使用 HTML 和 CSS 完成 Ontogramm，而不是使用图形/图像，那么网格可以做到这一点。但是，此网格需要 720 像素的最小宽度才能正确显示。在此之下，您会遇到仅基于大小的问题。它应该适应屏幕尺寸并自行扩展至全宽。

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>

【讨论】：

    猜你喜欢
    • 2022-01-16
    • 2016-10-31
    • 2015-10-09
    • 1970-01-01
    • 2011-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-02
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode