Partage
  • Partager sur Facebook
  • Partager sur Twitter

width d'un image dépasse le 100%

Sujet résolu
3 octobre 2018 à 14:21:49

bonjour tous le monde

je veux placer des élément au dessous d'une image alors j'ai mis l'image en position absolute mais apres cette modification la longeur de l'image 

dépasse la longeur normale : 

avant : 

apres : 

code (j'utilise le framework boostrap4):

<div class="container">
  <div class="row">
    <div class="col-md-8" >
      <h2><span>Acceuil</span></h2>
    </div>
    <div class="col-md-4">
      <img src="../../../assets/images/logo.png" class="img-fluid rounded border border-warning" style="z-index: 1;">
    </div>
    <img src="../../../assets/images/library-1147815_1280.jpg" class="img-fluid img-thumbnail " style="position:absolute;z-index: -2">
  </div>
</div>

  • Partager sur Facebook
  • Partager sur Twitter
3 octobre 2018 à 14:51:00

Salut,

cette image devrait être en background. Ce qui te posera moins de problème.

  • Partager sur Facebook
  • Partager sur Twitter
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
3 octobre 2018 à 14:55:50

Salut,

Liste s'écrit avec un 'e' à la fin et Accueil s'écrit 'ueil'.

As-tu essayé de changer la largeur de l'image avec 'width' ?

  • Partager sur Facebook
  • Partager sur Twitter
Toute suggestion de bonne pratique de code dans les langages est la bienvenue :-)
3 octobre 2018 à 15:00:49

Lucky13 a écrit:

Hello,

Et c'est accueil pas acceuil ^^


Un classique.
Pour ne pas se tromper : "écrire acceuil au lieu de accueil c'est Une Erreur Impardonnable."
  • Partager sur Facebook
  • Partager sur Twitter
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
3 octobre 2018 à 16:41:45

Bonsoir ,

Autant pour moi c'est du grand n'importe quoi ce que je vien d'écrire c'est tout l'inverse lol

Mais bon je me mélange des fois avec tout ces framework

Tiens juste une idée parce que j'avais dit des bêtises

<div class="card bg-light text-black offset-md-2 col-md-8">
  <img class="card-img" src="../../../assets/images/library-1147815_1280.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h2 class="card-title float-left">Accueil</h2> 
    <img src="../../../assets/images/logo.png" class="float-right rounded border border-warning" >
  </div>
</div>

En gros j'ai utilisé le sytème des images Overlays

https://getbootstrap.com/docs/4.1/components/card/#image-overlays

-
Edité par exen 3 octobre 2018 à 17:26:30

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

3 octobre 2018 à 21:04:36

Frogweb a écrit:

Lucky13 a écrit:

Hello,

Et c'est accueil pas acceuil ^^


Un classique.
Pour ne pas se tromper : "écrire acceuil au lieu de accueil c'est Une Erreur Impardonnable."


Ou comme Mbappé, il faudrait un joueur de foot dont le nom finit en ueil :D , ou penser à l'inverse de l'écureuil

Mais ta méthode me semble bien pensée, on peut pas faire plus simple sauf tapper "acceuuill" dans Google pour une correction, bien vu de ta part (à l'expérience....) :)

TheLordOne : 

Tu copieras 10 fois : "J'accueil un écureuil" la prochaine fois.^^

-
Edité par Lucky13 3 octobre 2018 à 21:10:15

  • Partager sur Facebook
  • Partager sur Twitter
4 octobre 2018 à 0:09:47

Non mais le pire a suivre votre écureuil moi, ce que j'ai fait ca n'a rien a voir avec la demande, j'arrive plus à suivre à la base avant de prendre l’écuelle en mains le but c’était quoi pour l'image de background ?????
  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

11 octobre 2018 à 19:03:49

merci a tous j'ai mis l'image en background et ca marche
  • Partager sur Facebook
  • Partager sur Twitter