Problème avec une div modulable et son image en backgound

Bonjour à tous !
Voilà je présente mon problème :

J'ai une div :
______________________________________________________________________
<div class="gabarit-image3" style="background-image: url(images/1_1.png)"></div>
______________________________________________________________________

J'ai volontairement mis un style dans la div parce que :

- j'applique à la div une ombre interne (avec la class "gabarit-image3" dans mon css), hors, cette ombre passe dessous l'image. Avec une image en background, l'ombre repasse par dessus.

- Le fait de mettre ici ce style, m'évite de créer un style par image dans mon fichier style.css

Voici le CSS de la class "gabarit-image3" :
______________________________________________________________________
.gabarit-image3{
display: block;
max-width: 600px;
min-width: auto;
height: 600px;
min-height: auto;
margin: 50px auto 20px auto;
-moz-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
-moz-background-size: contain;
}
______________________________________________________________________

Alors voilà mon problème : lorsque la fenêtre du navigateur est suffisamment large mon image s'affiche entièrement dans la div de 600x600px (taille originale de l'image par ailleurs) mais lorsque je rétrécis la largeur de la fenêtre du navigateur, la largeur de ma div réduit ainsi que l'image à l'intérieur (qui s'adapte) mais la hauteur de la div reste à 600px.
Nous avons du coup, l'image réduite avec la bonne largeur (égale à celle de la div) mais 2 bandes blanches dessus et dessous à cause de la hauteur qui ne s'adapte pas à l'image...

Voici mon lien pour mieux se rendre compte :

http://www.jeremy-godreau.com/1.html

Y-a-t-il une solution à cela ?

Cordialement,
Jérémy
Modifié par JemsGodo (31 Jan 2013 - 19:33)

Bonsoir,

Avec cette technique, impossible de redimensionner quoi que ce soit. Sauf en css3 (background-size), mais vu que ce n'est pas encore bien supporté : à oublier pour le moment.
Modifié par Olivier C (31 Jan 2013 - 23:20)

Bonjour Olivier !

S'il y a justement une solution avec background-size en css3, je suis preneur !

J'ai testé ce que tu m'as envoyé en mp, mais l'image ne se redimensionne pas... elle est toujours à 600px alors que le cadre avec l'ombre interne, lui, réduit en largeur ! ^^

__________________________________________________________________
<div class="gabarit-image3">
<img src="images/1_1.png" alt="Fredox - Procrastination"/>
</div>
__________________________________________________________________
.gabarit-image3{
display: block;
max-width: 600px;
min-width: 400px;
height: inherit;
margin: 50px auto 40px auto;
-moz-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
}
__________________________________________________________________

Du coup j'ai remis mon code comme avant en espérant qu'il y a une astuce avec du css3 même pas forcément supporté par tout les navigateurs ! (Je mise sur le css3, héhé)
Modifié par JemsGodo (01 Feb 2013 - 08:21)

J'ai envoyé un message en MP moi ? C'est une erreur alors, je me souviens juste avoir modifié mon message précédent car, après relecture de votre post, mes propos n'étaient pas pertinent en fonction de ce que vous recherchiez.

Donc, le problème de background-size (voir le tuto proposé en lien plus haut) n'est pas compatible avec des versions d'IE encore très utilisées aujourd'hui (je ne sais pas exactement lesquelles, je n'ai pas encore regardé ça de près). S'il ne s'agit que d'ajouter un effet d'ombrage sur l'image, essayez plutôt la pseudo class before : appliquez-y l'effet d'ombrage voulu et le tour est joué. Technique non supportée par IE7, mais vu que ce navigateur a pratiquement disparut, pas grave.

D'ailleurs, dans ce cas il ne s'agit que de l'effet d'ombrage, on entre donc dans ce que l'on appelle une "dégradation gracieuse". Alors que votre première solution ne fonctionne pas avec l'image même, ce qui est plutôt embêtant... Encore que... Un design pour moins de 600px c'est pour du mobile. Donc, finalement, ça ne concerne pas vraiment IE avant la version 10...

À voir... faites des tests.

Okay merci ! j'vais essayer !

Un grand merci !!
J'ai testé ":after" et en bidouillant, j'ai réussi à obtenir ceci :

LIEN: http://www.jeremy-godreau.com/1.html

HTML :
_______________________________________________________________________
<div class="gabarit-image3">
<img alt="Fredox - Procrastination" src="images/1_1.png">
</div>
_______________________________________________________________________


CSS :
_______________________________________________________________________
.gabarit-image3{
position: relative;
max-width: 600px;
min-width: 400px;
max-height: 600px;
min-height: 400px;
margin: 50px auto 40px auto;
}
.gabarit-image3 img {
width: 100%;
height: 100%;
}
.gabarit-image3:after{
position: absolute;
content: ' ';
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
-moz-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
}
_______________________________________________________________________

Par contre, lorsque la fenêtre du navigateur web est étroite (à partir de moins de 800 px de large) :
Il y a un espace horizontal en bas de l'image assez disgracieux...
Saurais-tu ce qui ne va pas ?
Cordialement,

Jérémy
Modifié par JemsGodo (04 Feb 2013 - 13:01)

Bon finalement, j'ai de nouveau bidouillé et au lieu de mettre :
__________________________________________________________
.gabarit-image3:after{
position: absolute;
padding: 0px;
content: ' ';
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
-moz-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
box-shadow:inset 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
}
__________________________________________________________

J'ai mis une valeur de 4 px pour bottom afin de remonter le cadre de l'ombrage interne qui dépassait d'autant...

Le problème à la base est que la div qui englobe l'image laisse une bande horizontale de 4 px sous l'image et ça, je ne comprends pas pourquoi...