28172 sujets

CSS et mise en forme, CSS3

Image centrée et redimensionnement

Hello!

J'ai mis une image centrée sur ma page d'accueil, mais j'ai un soucis lorsque j'agrandis ma fenêtre!

Jusqu'à une certaine largeur de fenêtre, l'image reste bien centrée, mais au delà, problème!

Un petit screenshot sera plus parlant!

upload/60558-01.jpg

upload/60558-02.jpg

Du coup j'aimerai que arrivée une certaine largeur, l'image ne cesse de s'agrandir et reste centrée avec la taille maximale définie!

J'ai essayé avec des max-width et max-height, mais ça ne semblait pas fonctionner!

Voici mon code HTML et mon CSS...



<!DOCTYPE html>
<html>
    <head>
        <title>Home | NOWHERE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="script.js"></script>
         
        <!-- CSS pour les pages du site -->
<!--         <link href="Stylesportfolio.css" rel="stylesheet" type ="text/css"> -->
    </head>
 
    <body>
 
    <!-- Preloader -->
    <!--
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    -->
 
    <div id='cssmenu'>
        <h1> NOWHERE </h1>
        <h3> Pictures of abandoned places </h3>
        <ul>
            <li class='active'><a href='index.php'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>Gallery</span></a>
            <ul>
                <li><a href='Decroissance.php'><span>Décroissance</span></a></li>
                <li><a href='Apostasie.php'><span>Apostasie</span></a></li>
                <li><a href='Abandon.php'><span>Abandon</span></a></li>
                <li><a href='Eschatologie.php'><span>Eschatologie</span></a></li>
                <li><a href='Hier.php'><span>Hier</span></a></li>
                <li class='last'><a href='Tuyaux.php'><span>Tuyaux</span></a></li>
            </ul>
            </li>
            <li><a href='About.php'><span>About</span></a></li>
            <li><a href='Exhibitions.php'><span>Exhibitions</span></a></li>
            <li><a href='Book.php'><span>Book</span></a></li>
            <li class='last'><a href='Contact.php'><span>Contact</span></a></li>
        </ul>
    </div>
 
    <?php
        $liste_image = array(
            'Background1',
            'Background2',
            'Background3',
            'Background4');  
    
        $image_au_hasard = rand(0, 3); // Rand() : Génère une valeur aléatoire
        echo '<img class="displayed" src="images/' . $liste_image[$image_au_hasard] .'.jpg" alt="Image" />';
    ?>                          
 
    <script src="jquery.js"></script>
    <script src="js/overlay1.js"></script>
    <script src="js/overlay2.js"></script> 
         
    </body>
</html>








IMG.displayed {
    width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 180px;
     
    }
 
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
 
  font-size: 14px;
  line-height: 15px;
  text-transform: uppercase;
  text-align: center;
color: #353136;
    font-family: courier new, arial;
   
   
  margin: auto;position: fixed;text-align: center;padding-bottom: 10px; padding-top: 10px; right: 0; left:0;/* margin-top: 60px; */ z-index: 1;
   
   
}
 
#cssmenu h1,h2,h3{color: black;}
 
 
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */
 
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 150px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 18px 11px 18px;
 
  text-decoration: none;
  color: #747474;
  text-shadow: 0px 1px 0px #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
    color: black;
}
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('images/menu.png') no-repeat;
    background-position: 95% -35%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #d80041;
    background-position: 95% 135%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #ffffff;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}


Merci d'avance pour votre aide!

Antoine
Sujet clos
Aller à