Image responsive

tu met une taille d'image a 100% hauteur plus largeur, si ton div fait 100px l'image fera 100px et la class css de bootstrap c'est img-responsiv

Bonjour,

tu peux déjà gérer le responsive des images avec la règle :

img{
max-width:100%;
height:auto;
}

Autrement, pour une mise en page de galerie de photos je t'invite à regarder du coté de flexbox , et de la propriété object-fitet object-position.

Alors, déjà merci pour vos réponses mais j'avais déjà essayé et cela n'a rien changé. Même en retestant maintenant.
Pour ce qui est des flexbox, ça me casse ce que Boostrap fait, c'est à dire que j'ai tout sur la même ligne et je parle même pas de la taille des images que j'ai. Sachant que par rapport à mon exemple donné en image ci-dessus, j'ai toutes les images horizontales à la même taille et celle de Tintin qui est plus grande.

Question pourquoi tu met des col dans un lien ? les liens ne sont pas des display bloc mai inline.

<a href="{{url($urldirectory.$file->getFilename())}}"  class="col-lg-3 col-md-4 col-xs-6">
       <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive" height="300"/>
 </a>

tu devrais faire ça ce sera déjà plus sémantique !!!

<div  class="col-lg-3 col-md-4 col-xs-6">
      <a href="{{url($urldirectory.$file->getFilename())}}">
             <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive" height="300"/>
      </a>
</div>

ensuite tu fait un class css que tu met dans le div

Hello !

Effectivement ce que dis neecride est une bonne solution. Tu met ton image dans une div à laquelle tu pourras définir une hauteur / Largeur si tu le souhaite et faire en sorte en css que ton image puisse prendre tout l'espace de ta div. Comme cela tu auras des images toujours de même taille.

Mhhhh alors si je vous ai suivi : j'ai ajouté une div autour de mon lien/image comme ceci :

            @foreach($files as $file)
                @if($file->getFilename() !== "cover.jpg")
                    <div  class="col-lg-3 col-md-4 col-xs-6 gallery-container">
                        <a href="{{url($urldirectory.$file->getFilename())}}">
                            <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive thumb"/>
                        </a>
                    </div>
                @endif
            @endforeach

J'ai également ajouté la classe gallery-container qui contient les propriétés suivantes :

 .gallery-container{
    width: 400px;
    height: 300px;
}

Alors ma gallerie a basculé sur 2 colonnes et même si le haut des images sont bien alignés, le bas n'est pas à la même hauteur quand les 2 images ne sont pas de la même taille.

Ai-je raté quelques chose ?

Oui tu a louper pleins de choses mon ami !!

A-tu apris bootstrap avant de l'utiliser ?
A-tu apris le html/css avant de faire du php ? la base d'un site repose sur le html/css il faut commencer par ça.

Pour bootstrap tu sera que les tailles en largeur sont déjà définie ne met pas de taille sur ton gallery-container sauf la hauteur cible aussi l'image qui est dedans et passe ça taille en 100%

 .gallery-container{
    height: 300px; //ton image fera 300px
}

 .gallery-container > img{
   max-width:100%; //la largeur sera celle du col-md choisis
   max-height:100%;
}

Je voudrais bien voir la suite de ton code car ce que tu détaille comme problème n'est pas logique car la grille responsive bootstrap met des float left sur les col-md etc... donc il doivent être aligner les un a coté des autre comme sur cette exemple.

la taille de la grille fait 12 si tu met 2 col-md-6 ça fera 12 si quatre col-md-3 ça fait 12 aussi la logique de la grille c'est ça row > col-md-6 ton foreach dans cette exemple doit donc être avec le col-md-6 et l'image dans le col-md-6 et ça s'emboitera.

puis si tu regarde bien ici tu a d'autre exemples pour tes images.

ça fait quelque mois que je n'ai pas utiliser bootstrap j'espère ne pas mettre tromper

Alors pour te répondre : oui et oui mais je ne suis pas du tout un grand fan de CSS et je m'en mords les doigts à chaque fois que je l'utilise car rien ne se met comme je veux, je prefère le backend.
Alors ensuite, j'ai modifié ce que tu m'as dit au niveau des règles CSS et tout est rentré dans l'ordre. Dans le sens où : j'ai plus de décalage et mes images se remettent bien sur 4 colonnes. Il me reste un dernier soucis : le soucis de la même hauteur pour les images.
Alors entre-temps, je me suis rendu compte que les règles

 .gallery-container > img{
   max-width:100%; //la largeur sera celle du col-md choisis
   max-height:100%;
}

sont déjà appliqués avec la classe img-responsive (de Boostrap) sur mes images. Mais du coup, il y a toujours ce soucis de hauteur qui n'est jamais la même.
Aurais-tu une idée stp ?

si la taille de ton container qui contien l'image est fixe 400px par exemple un height 100% devrais suffire ou inherit height : inherit ;

Alors on va faire un point sur ce que j'ai actuellement :
Niveau Laravel

            @foreach($files as $file)
                @if($file->getFilename() !== "cover.jpg")
                    <div  class="col-lg-3 col-md-4 col-xs-6 gallery-container">
                        <a href="{{url($urldirectory.$file->getFilename())}}">
                            <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive thumb" width="304" height="300"/>
                        </a>
                    </div>
                @endif
            @endforeach

Niveau CSS

    .gallery-container{
    max-width: 100%;
    height: inherit;
}

.thumb{
    margin-bottom: 20px;
}

Et voici ce que ça donne : http://hpics.li/631ea18
Bon déjà Tintin prends beaucoup de place ^^
et sinon au niveau des images horizontales, tout est presque aligné sauf jusqu'à la dernière ligne.

Pourtant il me semble avoir rien louppé de ce que tu m'as dit ^^

Ton site est en ligne ? si je peut voir le code je pourrais te le faire.

Et pourquoi tu garde <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive thumb" width="304" height="300"/> si tu ajoute une taille en css dans style.css pas besoin de le remêtre sur la balisse img, ça coule de source non !!

et pourquoi cette class .thumb ?? tu rajoute une class alors que tu a déjà .gallery-container met ton margin dedans et le inherit met le plutot sur l'image.

.gallery-container > img{
   max-width:100%; 
   height:inherit;
}

Si je ne me suis pas embrouiller ça devrait être bon.

C'est tout de même étrange que tes bloc sont aligner a droite alors que c'est un float left.

Alors non il n'est pas en ligne, tout est encore en local pour l'instant mais je peux t'envoyer ce que j'ai fait.
Là actuellement, j'ai donc retiré la taille sur l'img, retiré la classe thumb (qui contenait juste un margin-bottom car les images sont collés sinon).
Puis on revient sur le problème du début avec le même soucis, les images decalés, les hauteurs qui ne sont plus les même, etc.
Alors j'ai installé un plugin jQuery qui me servait pour un affichage gallerie : il s'apelle LightGallery mais j'ai verifié, il balance aucune propriété CSS sur l'affichage général.
J'ai check également : dans mes propriétés : il y a bien un float:left qui passe sans soucis, mais aucunes règles qui justifie que ce soit à droite.

Copie le code de ça dans un premier temps ou inspire toi :

https://blackrockdigital.github.io/startbootstrap-thumbnail-gallery

tu peut voir que ça fonctionne bien.

ensuite on verra pour tes images.

Oui je vois que ça fonctionne bien dès que je retire l'image de Tintin et les images horizontales qui sont pas de la même taille. J'ai une gallerie homogène et c'est que je veux.

Sans news, je me permet d'up le post :)

Bha c'est pas compliquer pourtant :

.container {
    height:400px; 
}

.container > img {
    min-width:100%;
    max-height:100%;
}

On te donne des piste maintenant faut que tu face des teste

En faite après y avoir pensée tu peut aussi mettre une class a tes images tu t'en sortira mieu je pense