使图像和文本响应

时间:2018-04-20 04:52:08

标签: html css twitter-bootstrap

我希望我的图像和文字能够快速响应,我已经为我需要的格式添加了图像,但我使用了一些编码,而且我无法以正确的方式执行此操作。请有人帮帮我吗?

我在这里使用这种格式的桌面版display in desktop version

这就是我在平板电脑中看到的屏幕768 image for tablet

现在我希望平板电脑与桌面电脑类似 image I want for tablet



@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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

customer4适用于高于992像素的屏幕宽度。

你应该将'col-sm-4'添加到第一列div,将'col-sm-8'添加到第二列div。添加,而不是替换。

这应该可以在较小的屏幕上获得正确的比例。