html - 使图像和文本响应

Question

我希望我的图像和文本能够响应，我已经为我需要的格式添加了图像，但我使用了一些编码，但我无法以正确的方式进行。有人可以帮我吗？

我这里有桌面版的这种格式

这就是我在平板电脑上看到的屏幕 768

现在我希望平板电脑与台式机类似

@media (min-width:641px) {
.home-top{
  background: url(../../images/index/u155.png);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
  color:#fff;
  padding-top: 30px; 
  padding-bottom: 30px; 
    }
  }

<div class="home-top ">
    <div class="container">
        <div class="lg-container">
            <div class="lg-container">
                <div class="row">
                    <div class="col-md-4 "><img src="<?php echo URL ?>public/images/image_directeur.png" class="director-img"></div>
                      <div class="col-md-8 ">Mot de l’Inspecteur Général en charge de l'IGF <br><br>Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur général Mr Salomon Jude Alix Patrick...  Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur Général Mr Guy Romero LATRY...
                        <br><br>
                        Guy Romero LATRY <span style="float: right;"><button class="home-top-btn">Lire l'article >></button></span>

                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

Answer 1

col-md-* 适用于大于 992px 的屏幕宽度。

您应该将“col-sm-4”添加到第一列 div，将“col-sm-8”添加到第二列。添加，而不是替换。

这应该有助于在较小的屏幕上获得正确的比例。