0
votes

Le dimensionnement par rapport au parent fonctionne différemment sur Firefox et Chrome

J'utilise .H-75 de Bootstrap pour redimensionner une image par rapport à son parent div. Sur les travaux de redimensionnement de Firefox, mais sur Chrome, il semble l'ignorer.

J'ai essayé d'ajouter de l'objet-ajustement: couverture mais cela n'a pas fonctionné. P>

  <div class="container d-flex flex-column min-vh-100">
    <div>
      Some objects
    </div>
    <div class="mb-3" style="max-height: 50vh;">
      <img src="./img/mmm.png" class="d-none d-sm-inline h-75">
      <p class="mt-1 lead">some text</p>
    </div>
    <div>
      Some objects
    </div>
  </div>

css twitter-bootstrap

2 commentaires

Le redimensionnement de la photo est toujours un peu funky ... je recommanderais le coiffage de l'image d'être un affichage: élément de bloc afin qu'il agit un peu plus comme un div :)

Changer en ligne sur Block pousse l'image à gauche de l'écran et ne peut pas l'obtenir d'aligner au centre

3 Réponses :

0
votes

    Solution: ->
    Insted of using h-75 class, you can try img-fluid class to <img> tag...it adjust automatically according to viewport.

    <div class="container d-flex flex-column min-vh-100">
        <div>
          Some objects
        </div>
        <div class="mb-3" style="max-height: 50vh;">
          <img src="./img/mmm.png" class="d-none d-sm-inline img-fluid">
          <p class="mt-1 lead">some text</p>
        </div>
        <div>
          Some objects
        </div>
      </div>

You can try this...

2 commentaires

Si vous utilisez une version Bootstrap 3 que vous pouvez utiliser la classe "IMG-EDICATIVE".

essayé, maintenant l'image ne fonctionne pas correctement sur les deux navigateurs

0
votes

Solution: ->        
If you adding max-height on parent div 50vh... So you have to add height same as max-height..

        Here is the code...

        <div class="container d-flex flex-column min-vh-100">
            <div>
              Some objects
            </div>
            <div class="mb-3" style="max-height: 50vh; height: 50vh">
              <img src="https://yt3.ggpht.com/a/AGF-l7-BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-mo-c-c0xffffffff-rj-k-no" class="d-none d-sm-inline h-75 img-responsive">
              <p class="mt-1 lead">some text</p>
            </div>
            <div>
              Some objects
            </div>
          </div>

    I tried on both browsers Firefox and chrome...

0 commentaires

0
votes

À la fin, j'ai eu le comportement prévu en passant de max-hauteur VH, à juste VH.

0 commentaires