Les images et les div.

Version imprimable

Bonjour,

Je travaille sur un site ou je dois afficher un extrait de mes articles, ainsi que l'image à de l'article.

Pour cela, j'ai deux bloques collé, comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="col-md-9"> <div class="col-md-4 r l"> <div class="white marg-top size-full"> <div id="article"><a href="/votre-sejour/prestation/" ><img src="http://placehold.it/283x200"></a></div> </div> </div> <div class="col-md-8 col-xs-9 l"> <div class="white marg-top size-full" id="pres" > <div> <span><h2>Prestation</h2></span> <div class="souligner"></div> </div> <div> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selec</p> </div> <div class="right"><a href="/votre-sejour/prestation/">LIRE LA SUITE</a></div> </div> </div>
Pour que l'image concorde en div lorsque l'écran est "large", il faut que celle ci face une taille de 280x200 pixel, hors, compliqué de demander à un client de redimensionner les images à la bonne taille. Je ne peux pas non plus me permettre de redéfinir une taille à l'image, cela déformerai l'image.

La 1er idée étant de redéfinir seulement la hauteur ou largeur, sachant que la largeur varie selon la taille de l'écran, mais pas la hauteur, qui reste à 200 pixel. Mais si l'image est trop petite, mon image ne prend pas toute la div.

Mon idée numéro deux, serai de centrer l'image au milieux du bloque à partir du milieu de l'image ( Est-ce possible en CSS ? ), et ensuite, d'appliquer un overflow : hidden sur mon div parent.

Donc je sais pas trop comment faire, le but étant de faire quelque chose d'assez jolie ( sans déformer l'image ), et responsive. Si vous avez des solutions, merci d'avance !

17/08/2016, 17h25
Invité

Bonjour,

quel est le code CSS associé ? :koi:

+ des copies d'écran, pour voir le problème.
et/ou une page test (simplifiée) en ligne (ou un codepen).

Pour le moment, le code associé est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.size-full {
    width: 100%;
    height: 200px;
}
@media (min-width: 992px)
.col-md-9 {
    width: 75%;
}
@media (min-width: 992px)
.col-md-4 {
    width: 33.33333333%;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="col-md-9">
    <div class="col-md-4 r l">
        <div class="white marg-top size-full">
                        <div id="article"><a href="/fr/votre-sejour/prestation/" ><img src="http://placehold.it/283x200"></a></div>
        </div>
    </div>
    <div class="col-md-8 col-xs-9 l">
        <div class="white marg-top size-full" id="pres" >   
            <div>
                <span><h2>Prestation</h2></span>
                <div class="souligner"></div>
            </div>
            <div>
                <p><p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selec</p>
</p>
            </div>
            <div class="right"><a href="/fr/votre-sejour/prestation/">LIRE LA SUITE</a></div>
        </div>
    </div>

Le souci va être si l'image est trop petite ou trop grande. Après, je demandais surtout pour les solutions qui peuvent être employée.

17/08/2016, 19h24
Invité

J'entends bien,
mais les codes fournis (à eux seuls) ne permettent pas de reproduire le problème...

... et donc d'y apporter une solution.

Voilà un morceau plus explicite

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="col-md-3 col-sm-6 col-xs-6 marg-top">
    <div class="titre-img">
        <h2>CHAMBRES SPACIEUSES</h2>
        <hr />
    </div>
    <div class="text-img">
        <p>Profitez du confort d’un hôtel 3 étoiles<br />
        aux chambres spacieuses.</p>
    </div>
    <div class="rel">
        <div class="plus-push-img"><a href="/fr/chambres-suites/"></a></div>
        <p><img class="alignnone size-full wp-image-21" src="/wp-content/uploads/2016/06/Chambre.png" 
         alt="Chambre"/></p>
    </div>
</div>

Voilà les style appliqué sur mes images :

Code:

1
2
3
4
5
6
7
8
9
 
.size-full {
    width: 100%;
    height: 200px;
}
@media (min-width: 992px)
.col-md-3 {
    width: 25%;
}

L'image est une image à la une, le client peut le changer, et mettre n'importe qu'elle image, donc elle peut être déformé. Je cherche une autre méthode, sachant que l'image doit prendre toute la largeur de la div.

Bonjour,

en déplaçant la class "size-full" sur le <p> entourant l'image :

Code:

1
2
3
<p class="size-full">
   <img class="alignnone wp-image-21" ..... />
</p>

Code:

1
2
3
4
5
6
7
8
9
10
11
p.size-full {
  position:relative;
    width: 100%;
    height: 200px;
  overflow:hidden;
}
p.size-full img {
  position:absolute;
    min-width: 100%;
    min-height: 200px;
}

Là le souci, c'est la classe plus-push-img, le texte et titre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
.marg-top {
    margin-top: 30px;
}
.titre-img {
    width: 100%;
    color: white;
    margin-top: 75px;
    padding-right: 32px;
    text-align: center;
    position: absolute;
    z-index: 1;
}
.text-img {
    position: absolute;
    margin-top: 130px;
    color: white;
    width: 100% !important;
    padding-right: 32px;
    z-index: 1;
    text-align: center;
}
.rel {
    position: relative;
}
.plus-push-img a {
    width: 40px;
    height: 40px;
    background-image: url(wp-content/uploads/2016/08/plus.png);
    position: absolute;
    right: 0;
    top: 0;
}

J'ai le tout qui sort de mon image en responsive.

18/08/2016, 11h45
Invité

Tu es bien "gentil",
mais comment veux-tu qu'on VISUALISE ???

Mets au moins une COPIE d'ECRAN, ou une PAGE EN LIGNE !

et le CODE HTML, associé au CSS !
18/08/2016, 14h05
bloups0

http://concortel.galago.fr/fr/accueil/

Voilà le lien du site web. Sur l'accueil tu peux voir les images. Le souci reste d'essayer de redimensionner une image assez proprement.

(Je m'y connais pas en CSS, il s'agit du 1er site que je fais)
18/08/2016, 15h34
Invité

Inutile de "Répondre avec citation" un message complet :
clique sur le bouton "+Répondre à la discussion" (en bas à gauche)

Pour les 2 images du haut :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.taille {
    background-color: black;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.taille img {
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 200px;
    opacity: 0.5;
}
.offre-exclu {
    /*height: 200px; à SUPPRIMER */
    /*margin-top: 0.1%; à SUPPRIMER */
    /*width: 100%; à SUPPRIMER */
}

à priori pour les 4 autres :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.rel p {
    background-color: black;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.rel p img {
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 200px;
    opacity: 0.5;
}

et enlever la class "size-full" sur ces images

18/08/2016, 16h04
bloups0

En effet, ça marche :) merci pour l'aide ! Tu connaitrais un moyen de cadrer l'image en son centre ?
18/08/2016, 18h33
Invité
Pour ça, il faut récupérer les dimensions de l'image.

En JavaScript, par exemple, puis jouer sur la position de l'image en CSS : top / left.

Tu peux regarder ici :
- http://codepen.io/jreaux62/pen/gpMavx
dans "JS" -> "Centrage des images"
19/08/2016, 09h02
bloups0

Merci pour les réponses !