1485 sujets

Web Mobile et responsive web design

Problèmes Images responsives (bootstrap)

Bonjour à tous,

je rencontre un soucis lorsqu'il s'agit de rendre responsive deux images. Je suis débutante donc la réponse est certainement sous mes yeux mais j'aurais besoin d'un oeil neuf pour y voir plus clair.

[b]Pour la première image[/b], au moment meme ou la taille de l'écran diminue j'obtient ceci

upload/63221-Capturedan.png

voici le code correspondant : 

 <header class="row">
        <div class="col-lg-2">
          <img src="img/LOGO-01.png" id="LOGO" height="140%" width="140%">
        </div>
        <div class="col-lg-10">
         <img src="img/plage.png" id="plage" class="img-responsive" height="100%" width="100%">
        </div>
</header>


[b]Pour la deuxième[/b] le soucis apparait uniquement lorsque je suis en taille d'écran smartphone



voici le code correspondant 

<div class="col-md-6">
        <div class="col-md-2 col-xs-2">
            <img src="img/localisation.png" alt="nous localiser" />
        </div>
        <div class="col-md-10 col-xs-10">
            <img src="img/carte.png" clas="img-responsive" class="img-rounded" alt="carte" width="500" height="400">
        </div>
    </div>
</div>



Merci d'avance à ceux qui me viendrons en aide et m'aiderons à voir un truc évident que j'aurais loupé
Modifié par anaisG (06 Nov 2016 - 18:22)
Bonjour,

Alors, c'est tout simplement que les images ne se redimentionnent pas correctement lors du changement de taille d'écran. Pour LA premières (jnai pas réussis à mettre d'images). Le logo se grossis considérablement à peine la taille d'écran est changé.

Pour la deuxième (LA carte) elle se redimentionne seulement jusqu'à un certain point Et apres plus ...
Tu parle de "responsive" donc les image devraient s'adapter à la largeur des colonnes dans lesquelles elles se trouvent ?

Quand j'utilise Bootstrap, habituellement, je mets les images à style="width: 100%;" (sans modifier le height pour que le ratio soit conservé).
Grâce à cet attribut style, l'image est toujours de la largeur de la colonne (col-sm-X col-md-X col-lg-X).

N'essaie pas de modifier toi-même la taille de ton image et tu pourras te reposer sur les fonctionnalités responsive de Bootstrap.

Donc je dirais (premier code, édité) :
<header class="row">
   <div class="col-lg-2">
      <img src="img/LOGO-01.png" id="LOGO" style="width: 100%;">
   </div>
   <div class="col-lg-10">
      <img src="img/plage.png" id="plage" style="width: 100%;">
   </div>
</header>


Pour contrôler la largeur en mode mobile, pense à col-xs-X
Modifié par Trehinos (07 Nov 2016 - 15:12)
Merci pour ta réponse, je viens d'essayé et j'ai toujours ce même problème, une fois l'écran à peine redimensionné l'image "logo" occupe toute la largeur de l'écran donc les 12 colonnes

Cf capture d'écran upload/63221-Capturedan.png

concernant la gestion sur smartphone c'est réglé et de même pour la deuxième image, merci !
Modifié par anaisG (07 Nov 2016 - 17:29)
bonjour,

en effet je l'ai utilisé sur certaine de mes images ! En cherchant bien j'ai réussis à obtenir le résultat voulu Smiley smile
Sujet clos
Aller à