Aide : images non proportionnelles à la div

Question

mondaye

19 Sep 2013 à 22:07

Bonjour,
Je voudrais vous soumettre un problème sur un site que je crée.

C'est un portfolio photo, et je dois les afficher en scroll à l'horizontal. Mon problème est que lors de la redimension de ma fenêtre de navigateur, les images restent en taille fixe alors que la div dans laquelle elles sont est proportionnelle (je lui ai mis un fond coloré jaune pour m'en rendre compte).

J'aimerais que les images puissent s'étirer en fonction de la taille de la fenêtre de la même manière que mon fond coloré jaune, sans être déformées. Comme sur ce site : http://www.tomhoops.com/ . Mais actuellement j'ai ça :

http://image.noelshack.com/minis/2013/38/1379621169-capture-d-ecran-2013-09-19-a-17-16-21.png

voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mallory Pérot photographe à Paris</title>
 
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font.css" />
 
 
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min_.js"></script>
 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200' rel='stylesheet' type='text/css'>
 
 
 
 
<script type="text/javascript">
        <!--
        $(document).ready( function () {
            // On cache les sous-menus
            // sauf celui qui porte la classe "open_at_load" :
            $("ul.subMenu:not('.open_at_load')").hide();
            $("ul.subMenu2:not('.open_at_load')").hide();
            // On selectionne tous les items de liste portant la classe "toggleSubMenu"
         
            // et on remplace l'element span qu'ils contiennent par un lien :
            $("li.toggleSubMenu span").each( function () {
                // On stocke le contenu du span :
                var TexteSpan = $(this).text();
                $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
            } ) ;
         
            // On modifie l'evenement "click" sur les liens dans les items de liste
            // qui portent la classe "toggleSubMenu" :
            $("li.toggleSubMenu > a").click( function () {
                // Si le sous-menu etait deja ouvert, on le referme :
                if ($(this).next("ul.subMenu:visible").length != 0) {
                    $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                }
                // Si le sous-menu est cache, on ferme les autres et on l'affiche :
                else {
                    $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                    $("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                    $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
                     
                }
                // On empêche le navigateur de suivre le lien :
                return false;
            });
             $("li.toggleSubMenu2 > a").click( function () {
                // Si le sous-menu etait deja ouvert, on le referme :
                if ($(this).next("ul.subMenu2:visible").length != 0) {
                    $(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                }
                // Si le sous-menu est cache, on ferme les autres et on l'affiche :
                else {
                    $("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                    $(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
                }
                // On empêche le navigateur de suivre le lien :
                return false;
            });
         } ) ;
        // -->
        </script> 
     
    <script type="text/javascript" src="./bgstretcher.js"></script>
    <link rel="stylesheet" href="./bgstretcher.css" />
     
     
 
</head>
 
<body>
 
<div id="header2">
<a href="index.html"> &nbsp; <h1>MALLORY PÉROT</h1>
<h2>Photographe à Paris</h2></a>
 
<div id="copyright">
<p>&copy; tous droits réservés 2013</p>
</div>
<hr width="100%" size="1" color="grey">
</div>
 
 
<div id="contenu">
<div id="navback">
<div id="nav"><br /> <br />
<ul class="navigation">
        <a href="apropos.html"><h2>À PROPOS</h2></a>
        <hr>
        <h2>PORTFOLIO</h2>
        <li class="toggleSubMenu"><span>+ Travaux personnels</span>
             
                <ul style="display: block; " class="subMenu">
                    <li><a href="#"><i><u>Circus - 2014 (prochainement)</u></i></a></li>
                    <li><a href="photoperso10.html"><i><u>Pull ! - 2013</u></i></a></li>
                    <li><a href="photoperso09.html"><i><u>La petite cantate - 2013</u></i></a></li>
                    <li><a href="photoperso08.html"><i><u>Pin up butter - 2012</u></i></a></li>
                    <li><a href="photoperso07.html"><i><u>Le langage du corps - 2012</u></i></a></li>
                    <li><a href="photoperso06.html"><i><u>Blurred lines - 2012</u></i></a></li>
                    <li><a href="photoperso05.html"><i><u>Báthory - 2012</u></i></a></li>
                    <li><a href="photoperso04.html"><i><u>Nu - 2011</u></i></a></li>
                    <li><a href="photoperso03.html"><i><u>Entre les murs - 2011</u></i></a></li>
                    <li><a href="photoperso02.html"><i><u>Reine végétale - 2010</u></i></a></li>
                    <li><a href="photoperso01.html"><i><u>Beauty is the beast - 2009</u></i></a></li>
                    </ul>
              </li>
               
              <li style="position: static; " class="toggleSubMenu2 open"><a href="#">+ Portraits</a>
                <ul style="display: block; " class="subMenu2">
                    <li><a href="photoportraitsfemmes.html"><i><u>Femmes</u></i></a></li>
                    <li><a href="photoportraitshommes.html"><i><u>Hommes</u></i></a></li></ul>
              </li>
               
              <li style="position: static; " class="toggleSubMenu2 open"><a href="#">+ Art</a>
                <ul style="display: block; " class="subMenu2">
                    <li><a href="photoart05.html"><i><u>Cinéma</u></i></a></li>
                    <li><a href="photoart04.html"><i><u>Danse</u></i></a></li>
                    <li><a href="photoart03.html"><i><u>Mode</u></i></a></li>
                    <li><a href="photoart02.html"><i><u>Musique</u></i></a></li>
                    <li><a href="photoart01.html"><i><u>Théâtre</u></i></a></li></ul>
              </li>
               
              <li style="position: static; " class="toggleSubMenu2 open"><a href="#">+ Heureux évènements</a>
                <ul style="display: block; " class="subMenu2">
                    <li><a href="photoevements03.html"><i><u>EVJF</u></i></a></li>
                    <li><a href="photoevements02.html"><i><u>Mariages</u></i></a></li>
                    <li><a href="photoevements01.html"><i><u>Naissances</u></i></a></li></ul>
              </li>
               
                            <li style="position: static; " class="toggleSubMenu2 open"><a href="#">+ Communication</a>
                <ul style="display: block; " class="subMenu2">
                    <li><a href="photocom03.html"><i><u>Évènementiel</u></i></a></li>
                    <li><a href="photocom02.html"><i><u>Packshot</u></i></a></li>
                    <li><a href="photocom01.html"><i><u>Publication</u></i></a></li></ul>
              </li>
               
               <li style="position: static; " class="toggleSubMenu2 open"><a href="#">+ Vidéo</a>
                <ul style="display: block; " class="subMenu2">
                    <li><a href="photocom03.html"><i><u>Tout</u></i></a></li>
              </li>
               
               
         
         
</ul> <hr>
<ul class="navigation">
             <a href="contact.html"> <h2>CONTACT</h2> </a>
              <hr></ul>
</div>
</div>
 
 
 
<div id="images">
<div class="image"><img src="img/1ere" /></div>
<div class="image"><img src="img/home/1.jpg"/></div>
<div class="image"><img src="img/home/2.jpg" /></div>
<div class="image"><img src="img/home/3.jpg" /></div>
<div class="image"><img src="img/home/4.jpg" /></div>
<div class="image"><img src="img/home/5.jpg" /></div>
<div class="image"><img src="img/home/6.jpg" /></div>
<div class="image"><img src="img/home/7.jpg" /></div>
<div class="image"><img src="img/home/8.jpg" /></div>
<div class="image"><img src="img/home/9.jpg" /></div>
</div>
</div>
 
<div id="footer">
 
<p> Me suivre sur : <a href="http://www.facebook.com/mperot.photo"><img src="img/facebook.png" /> </a> <a href="http://instagram.com/aimepi_"><img src="img/instagram.png" /></a></p>
</div>
 
</body>
</html>

@charset "UTF-8";
/* CSS Document */
* {
    margin:0px;
    padding:0px;
}
html {
  height: 100%;
}
 
body {
  margin: 0;
  padding: 0;
  background-image:url(img/texture4.png) ;
}
 
#header {
    background-image:url(img/headerbackgroundblanc.png) ;  
    background-position : center center;
    height: 80px;
    padding-top:40px;
    position: relative;
    z-index: 4;
}
 
#header2 {
     
    position: fixed;
    margin-top:-80px;
    z-index: 4;
    float: left;
    width: 100%;
}
 
#contenu {
    margin-top: 120px;
    height: 80%;
}
 
hr {
    margin-top: 2px;
}
 
 
#nav {
    height: 50%;
    width: 360px;
    padding-left: 15px;
    position: fixed;
    z-index: 3;
     
 
}
 
#navback {
    background-image:url(img/fondnav.png) ;
    height: 70%;
    width: 360px;
    padding-left: 15px;
    margin-left: 20px;
    position: fixed;
    z-index: 2;
}
 
 
#nav hr {
width: 340px;
margin-bottom: 5px;
color: grey;
filter : alpha(opacity=10);
    opacity : 0.8;
}
 
#nav h2 {
margin-left: -20px;
}
 
ul {
list-style-type: none;
}
     
#copyright {
    display: inline;
    float: right;
    padding-right: 15px;
    padding-top: 18px;
}
     
#entrer {
    width: 100%;
    min-height: 100%;
}
 
#images {
   position: absolute;
   height: 70%;
   white-space: nowrap;
   background-color: yellow;
}
 
.image {
   display: inline-block; 
}
 
 
 
     
     
#footer{
    background-image:url(img/footerbackgroundblanc.png) ;
    background-position : center center;
    bottom: 0px;
    position:fixed;
    margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 140px;
   
}
 
 
 
@charset "UTF-8";
/* CSS Document */
 
#header h1 {
    display: inline;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 30px;
    color: black;
    padding-left: 15px;
}
 
#header h2 {
    display: inline;
    margin-left: 5px;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    color: grey;
}
 
#header2 h1 {
    display: inline;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 30px;
    color: black;
    padding-left: 15px;
}
 
#header2 h2 {
    display: inline;
    margin-left: 5px;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    color: grey;
}
 
 a {
 text-decoration:none;
}
 
#copyright p {
font-family: 'Roboto', sans-serif;
    font-size: 12px;
 color: black;
}
 
#nav h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: black;
    padding-left: 15px;
}
 
 
#nav a{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: grey;
    padding-left: 0px;
}
 
 
 
 
#footer p {
margin-top: 90px;
text-align: center;
color: black;
font-family: 'Roboto', sans-serif;
    font-size: 18px;
}
 
#entrer h2 {
    text-align: center;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 80px;
    color: white;
    bottom: 0px;
    position:fixed;
    margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 30px;
  Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
    }

Merci d'avance pour votre aide

GroquikMLV

20 Sep 2013 à 10:38

Bonjour,
Je ne suis pas très à l'aise quand il est question de css, design et compagnie (d'ailleurs, je suis sur ce forum pour pouvoir en apprendre plus ^^), mais as-tu essayé d'attribuer une valeur en pourcentage à ta classe "image" dans le CSS (height ou width)?

Ta div a une hauteur en pourcentage, donc si tu redimensionnes la fenêtre du navigateur, la div sera redimensionnée également pour faire 70% en hauteur par rapport à la nouvelle fenêtre redimensionnée. Peut-être qu'en faisant la même chose pour les images, ça fonctionnera? Par exemple, tu mets 100% en hauteur, donc ça aura toujours la taille de la div en hauteur.

Zelalsan

20 Sep 2013 à 12:49

salut,
comme dit, il faut juste donner une hauteur de 100% de ta div à ton image et ne pas spécifier de largeur pour qu'elles restent proportionnelles.

mondaye

20 Sep 2013 à 14:13

Merci pour votre aide, hélas cela ne change rien du tout... Smiley decu

Zelalsan

20 Sep 2013 à 15:22

Tu as juste mal fait le truc. Tu dois aussi ajouter un "height:100%" à ta classe .image et faire pareil avec tes <img>.

6l20

21 Sep 2013 à 12:47

Bonjour,

Une page d'exemple en ligne (reproduisant le problème rencontré), c'est tout de même beaucoup plus pratique pour tenter de vous venir en aide.

Quelques erreurs à corriger avant d'aller plus loin.
- L'utilisation du Doctype XHTML1.0 transitional vous impose "quelques contraintes" :
1- Toutes les balises sans exceptions doivent être fermées.
2- Pas de Titre de niveau (éléments "h1, h2, h3, h4, h5, h6", de rendu block) dans un lien (élément "a", de rendu inline) (Un élément du groupe %inline ne peut contenir QUE un (ou plusieurs autres) éléments %inline.)

Bref, utilisez le validateur du W3C pour vous aider à corriger ces quelques erreurs ou optez pour le HTML5 (qui a lui aussi ses règles) Smiley cligne

À éviter, les balises de styles en ligne dans le code HTML (utilisez vos feuilles de styles).
Éviter également les espaces, sauts de lignes (br), ou autres lignes horizontales (hr), à des fins cosmétiques, vos feuilles de styles sont là pour cela (marges internes/externes, etc..).

Il y a certainement une meilleure façon de baliser vos listes d'images ("divite" aigüe en perspective), de même que pour appliquer un style à des images contenues dans un bloc possédant un identifiant :

#images img {}

Cela vous éviterait de répéter la classe .image sur vos div (qui me semblent parfaitement inutiles dans votre code, la classe peut, au minimum, être mise sur la balise img, ou mieux être supprimée en ciblant de façon plus pertinente ces images (cf exemple ci-dessus, à modifier si vous balisez autrement cette liste d'images))

Même si certains éléments de présentation ("size","i", "u", etc...) sont acceptés par votre Doctype, ils ne le sont pas tous, et vous avez tout intérêt, encore une fois, à utiliser vos feuilles de styles si le but de la manœuvre est d'obtenir un effet visuel (note, par défaut les liens sont soulignés, il suffirait donc de ne pas supprimer ce style par défaut de votre balise "a", et de lui rajouter l'italique)

a {
  text-decoration:none; /* à supprimer*/
  font-style: italic;
}

Voili, voilou, je ne faisais que passer Smiley cligne

Modifié par 6l20 (21 Sep 2013 - 13:43)

Sujet clos

Questions générales et questions de débutants

Aide : images non proportionnelles à la div