Discussion :

[bloups0]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Invité]

Bonjour,

quel est le code CSS associé ?

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

[bloups0]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[bloups0]

Voilà un morceau plus explicite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Invité]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}