Partage

redimensionnement impossible Image dans flexbox

flexbox et image

Sujet résolu

7 novembre 2018 à 15:42:33

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="I:/carlito-saintlouismarie.fr/CSS/mes_oeuvres_4.css" /> 
        <title>mes_oeuvres</title>
 </head>

    <body>
       <header>
          <section>
               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/ange_musicien_5.PNG" alt="ange majestueux musicien" /></div>
               
               <div class="column"><figure><img src="I:/carlito-saintlouismarie.fr/images/Baroncelli_polityptic.PNG" alt="Baroncelli polityptic du couronnement de la Vierge " />
               <figcaption>Polityptic du Couronnement de la Vierge de Baroncelli</figcaption></figure> </div>    

               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/Garguouille_sympatisante.PNG" alt="Garguouille sympatisante" /></div>
          </section>
       </header>
    </body>
</html>

CSS

header
{
  display: flex;
  justify-content: space-between;
  width: 900px;
  margin: auto;
}
section
{
  display: flex;
  justify-content: space-between;
}
img 
{
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
figcaption
{
 font-size: 0.7em; color: maroon; align-items: left;
}

Voilà cela marche assez bien tout est centré, enfin tout :

Je n'arrive pas à mettre le tableau du centre au top sans marge, et deuxièmement, comment redimensionner l'image de droite ....?

Merci

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="I:/carlito-saintlouismarie.fr/CSS/mes_oeuvres_4.css" /> 
        <title>mes_oeuvres</title>
 </head>

    <body>
        <section>
               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/ange_musicien_5.PNG" alt="ange majestueux musicien" /></div>
               
               <div class="column"><figure><img src="I:/carlito-saintlouismarie.fr/images/Baroncelli_polityptic.PNG" alt="Baroncelli polityptic du couronnement de la Vierge " />
               <figcaption>Polityptic du Couronnement de la Vierge de Baroncelli</figcaption></figure> </div>    

               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/Garguouille_sympatisante.PNG" alt="Garguouille sympatisante" /></div>
        </section>
    </body>
</html>

CSS

section
{
  max-width: 900px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex:1 1 200px;
 }
img 
{
  min-width: 30%; min-height: 30%;
  max-width: 70%; max-height: 70%;
}
figure img
{
	max-width: 400%; max-height: 200px;
}
.column 
{
  margin-top: 40px;
}
.column:first-of-type
{
  flex:1 1 200px;
}
.column:first-of-type img
{
  align-items: left;
  width: 40%; height: 40%
}
.column:second-of-type 
{
  flex:2 2 400px;
}
.column:second-of-type figure img 
{
  align-items: center;
  width: 100%; height: 100%;
}
.column:third-of-type 
{
  flex:1 1 200px;
}
.column:third-of-type img
{
  align-items: right;
  width:60%; height:60%;
}

et cela donne:

Je voudrais centrer le tableau et positionner les deux images latérales ..... je ne sais pas comment faire.

Merci

Chose étonnante !

En mettant côte à côte mon HTML et mon css je viens de m'apercevoir d'une erreur : l'énoncé de class est faux, je vais le corriger et voir ce qu'il se passe ?

Bonjour à tous,

Je suis débutant et bute sur ce problème !

Je voudrais créer un triptyque avec un tableau au centre et deux autres images, l'une sur la droite et l'autre sur la gauche.

Je n'arrive pas redimensionner mes images dans une flexbox en space-between

j'arrive à redimensionner les deux images latérales mais le tableau du centre qui est une figure et une img ....impossible de redimensionner.

Joint mon HTML et mon css

Cordialement et merci !

Carlito

Le css

-
Edité par Charlesbex 8 novembre 2018 à 12:52:14

mootookoi

7 novembre 2018 à 16:12:15

Bonjour,

Utilise la balise code et colle y ton code. Ça nous aidera a reproduire ton problème.

Sinon mieux, créé un pen sur codepen ou un «fiddle ?» sur jsfiddle.

Dev Web Full Stack ( si si c'est possible )

Charlesbex

7 novembre 2018 à 17:33:42

Depuis je cherche, cela bouge mais pas dans mon sens .......

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="I:/carlito-saintlouismarie.fr/CSS/mes_oeuvres_4.css" /> 
        <title>mes_oeuvres</title>
 </head>

    <body>
        <section>
               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/ange_musicien_5.PNG" alt="ange majestueux musicien" /></div>
               
               <div class="column"><figure><img src="I:/carlito-saintlouismarie.fr/images/Baroncelli_polityptic.PNG" alt="Baroncelli polityptic du couronnement de la Vierge " />
                <figcaption>Polityptic du Couronnement de la Vierge de Baroncelli</figcaption>
                     </figure> </div>    

               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/Garguouille_sympatisante.PNG" alt="Garguouille sympatisante" /></div>
          </section>
       </body>
</html>

section 
{
  max-width: 900px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex:1 1 200px;
}
img
{
  min-width: 30%; min-height: 30%;
  max-width: 70%; max-height: 70%;
}
figure img
{
	max-width: 400%; max-height: 200px;
}

.column 
{
  margin-top: 40px;
}
.column:first-of-type
{
  background-color: maroon;
  flex:1 1 200px;
}
.column:first-of-type img
{
  width: 50%; height: 50%
}
.column:second-of-type 
{
  background-color: yellow;
  flex:2 2 200px;
}
.column:third-of-type 
{
  background-color: maroon;
  flex:1 1 200px;
}

Lord Morpheus

7 novembre 2018 à 22:40:21

Bonsoir,

Il vas te falloir revoir complétement ton savoir sur display: flex...

Tout simplement : https://jsfiddle.net/v5ztb2ap/

Au plaisir...

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

EmmanuelBeziat

8 novembre 2018 à 2:37:24

On peut encore simplifier en retirant ce qui n'est pas nécessaire : https://jsfiddle.net/v5ztb2ap/1/

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Charlesbex

8 novembre 2018 à 11:27:45

Merci de vos conseils et de vos exemples ......je vais essayer !

Charlesbex

12 novembre 2018 à 13:11:03

Bonjour,

J'ai compris le Flex, le justify-content et le space-between mais ce que je n'arrive pas à faire, c'est travailler les images de chaque boite, ici trois boites en space_between et impossible de mettre comme il faut l'image de droite tout en haut à droite et la redimensionner par exemple.....

Cordialement Carlito

Lord Morpheus

12 novembre 2018 à 15:58:23

Oui et donc nous devons deviner le code que tu as écris afin de t'aider?

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Charlesbex

13 novembre 2018 à 14:07:50

Salut Lord,

Voici mon code HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="I:/carlito-saintlouismarie.fr/CSS/mes_oeuvres_4.css" /> 
        <title>mes_oeuvres</title>
 </head>

    <body>
       <header>
          <section>
               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/ange_musicien_5.PNG" alt="ange majestueux musicien" /></div>
               
               <div class="column"><figure><img src="I:/carlito-saintlouismarie.fr/images/Baroncelli_polityptic.PNG" alt="Baroncelli polityptic du couronnement de la Vierge " />
               <figcaption>Polityptic du Couronnement de la Vierge de Baroncelli</figcaption></figure> </div>    

               <div class="column"><img src="I:/carlito-saintlouismarie.fr/images/Garguouille_sympatisante.PNG" alt="Garguouille sympatisante" /></div>
          </section>
       </header>
    </body>
</html>

et voici mon CSS

header

{

display: flex;

width: 900px;

margin: auto;

}

section

{

display: flex;

justify-content: space-between;

}

img

{

display: block;

max-width: 100%;

height: auto;

vertical-align: top;

}

figcaption

{

font-size: 0.7em; color: maroon; align-items: left;

}

.column:third-of-type img

{

width: 50%;

height: 50%;

}

Voici le résultat

Je n'arrive pas à redimensionner les images ???

Ma question est simple comment maîtriser la gestion des images dans chaque boite ? ( Mettre le tableau au Top sans marge, et redimensionner les deux images latérales ......?)

Merci !

mootookoi

13 novembre 2018 à 14:26:39

Bonjour,

Pour que ton image du milieu soit au "top" il faut simplement que tu annule les marges de ta balise <figure> avec un margin: 0;

Pour redimensionner les images latérales, tu leurs donnes une class et tu changes leur dimensions en css.

Dev Web Full Stack ( si si c'est possible )

Charlesbex

13 novembre 2018 à 18:39:57

Bonjour Booya,

Cela fonctionne mais je n'arrive pas à trouver comment mettre l'image de droite tout à droite J'ai pourtant mis la propriétés align_items ???

Merci !

Mon CSS, et le Fichier HTML est au-dessus dans le message d'avant .....

header
{
  display: flex;
  width: 900px;	
  margin: auto;
}
section
{
  display: flex;
  justify-content: space-between;
}
img 
{
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
figure
{
	margin: 0;
}
figcaption
{
  font-size: 0.7em; color: maroon; align-items: left;
}
.column_1 img
{
  width: 80%;
  height: 50%;
}
.column_2 img
{
  width: 100%;
  height: 100%;
}
.column_3 img
{
  width: 80%;
  height: 50%;
  align-items: right;
}

mootookoi

14 novembre 2018 à 6:05:28

Bonjour,

Au lieu de

.column_3 img

{

width: 80%;

height: 50%;

align-items: right;

}

met

.column_3 img

{

width: 80%;

height: 50%;

float: right;

}

Dev Web Full Stack ( si si c'est possible )

Lord Morpheus

14 novembre 2018 à 9:19:35

Bonjour,

Voici, très simplement, ce que tu demandes : https://jsfiddle.net/2hpcyr3z/

Peux tu mettre à jour et poster ici ton HTML/CSS afin de vérifier où tu en es?

Ce que tu demande est relativement simplement, puisque c'est le comportement par défaut de display:flex... Soit plus précis dans ta demande concernant le redimensionnement des images. Montre nous un schèmas/ta maquette qui te sert pour ton intégration.

Là on tourne en rond parce que tu t'entête à écrire, copier/coller des choses que tu ne comprend/maitrise pas! Tu met par exemple display:flex sur <header> alors que cela ne sert à rien... align-items:right n'as jamais existé...

Si tu ne veux pas prendre en compte mon premier conseil, à savoir : "Il vas te falloir revoir complétement ton savoir sur display: flex..." alors je m'arrête là pour mon aide..

J'attends ta réponse afin de voir où tu en es, le cas échéant je répondrai ou laisserai la main.

Bonne journée à toi

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Charlesbex

14 novembre 2018 à 13:00:27

Merci BOOYA et LORD pour votre aide .....

oui je m'embrouille encore un peu mais j'apprends assez vite ........ cela marche, j'arrive à travailler mes images comme je le souhaite. Je confondais beaucoup de chose, notamment le conteneur et son contenu et l'élément lui-même etc ...

Booya tu as raison avec float cela marche bien et en mettant un padding non à l'image mais à la boite cela fonctionne très bien.

Pour ma part je considère mon problème résolu !

Carlito, MERCI encore !

Idja

7 novembre 2020 à 9:33:53

Bonjour,

je remets en ligne mon site et je me rends compte que j'ai oublié pas mal de choses !

J''arrive pas à redimentionner les images sur mon index alors que sur les pages ça fonctionne ! Help !

AbcAbc6

9 novembre 2020 à 16:09:30

@Idja Bonjour, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

redimensionnement impossible Image dans flexbox

flexbox et image

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs