18008 sujets

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

Adapter une image sur différent écran

Bonjour,

je voudrais savoir comment faire pour s' adapter une image sur différent écran?

mon code:


<p> <div id="conteneur">

<!--<IMG SRC="photo/receptionbis.jpg"
ALT="Texte remplaçant l'image"
TITLE="Texte à afficher">  -->

				<img src="photo/receptionBis.jpg" usemap="#reception" />
				<map name="reception">
				
				<area shape="rect" coords="1,123,76,161" 
				href="melangeBis.html" alt="Elevateur 15"/>
					
				<area shape="rect" coords="51,186,140,211" 
				href="index.html" alt="B2E15"/>
				</map>				
 
 </div>


merci
Bonsoir,

Désolé, je me suis mal exprimé.
en plein écran, la photo et les menus sont bien proportionnels par rapport à mon affichage. Dès que je réduise, les menus et la photo n'ont plus la même disposition ainsi que les différentes zone de claquage sur la photo est décalée
voici mon code en html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
	<head>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
		<meta content="" name="description">
		<meta content="receptionBis.jpg" name="receptionBis.jpg">
		<title></title>
  <link rel="stylesheet" href="monstyle1.css">		
	</head>
	<body>

<!-- Menu de navigation du site -->
<ul class="navbar">	
<!-- Contenu principal -->
 <h1>RECEPTION</h1> 

	<li><a href="../index.html">Home</a>
	<li><a href="reception/E11.html">E11</a>
	<li><a href="reception/E15.html">E15</a>  
	<li><a href="reception/TRF2.html">TRF2</a> 
	<li><a href="reception/TRF3.html">TRF3</a>   
	<li><a href="reception/V46F3.html">V46F3</a>   
	<li><a href="reception/TR3.html">TR3</a> 
	<li><a href="reception/TR6.html">TR6</a>   
	<li><a href="reception/TR10.html">TR10</a>
	<li><a href="reception/TR10B.html">TR10B</a>  
	<li><a href="reception/TR22.html">TR22</a> 
	<li><a href="reception/TR23.html">TR23</a>   
	<li><a href="reception/TR47.html">TR47</a>
	<li><a href="reception/TR48.html">TR48</a>
	<li><a href="reception/TR49_1.html">TR49.1</a>     
	<li><a href="reception/B2E15.html">B2E15</a> 	


  
  </ul>  

  
	
		<div>
<img alt="receptionBis.jpg" usemap="#receptionBis" src="file:///N:/Ucab/UCAB_GMAO/pgm/Photo/receptionBis.jpg">
<map id="receptionBis" name="receptionBis">
    <area alt="Elevateur 11" href="reception/E15.html" onclick="" shape="rect" coords="409,142,473,184">
    <area alt="Elevateur 15" href="reception/E15.html" onclick="" shape="rect" coords="15,139,78,182">
    <area alt="TRF2" href="reception/TRF2.html" onclick="" shape="rect" coords="97,695,157,727">
    <area alt="TRF3" href="reception/TRF3.html" onclick="" shape="rect" coords="270,697,330,729">
    <area alt="V46F3" href="reception/TRF2.html" onclick="" shape="rect" coords="310,795,370,827">
    <area alt="TR3" href="reception/TR3.html" onclick="" shape="rect" coords="545,663,602,706">
    <area alt="TR6" href="reception/TR6.html" onclick="" shape="rect" coords="577,319,634,362">
    <area alt="TR10" href="reception/TR10.html" onclick="" shape="rect" coords="1071,315,1128,358">
    <area alt="TR10B" href="reception/TR10B.html" onclick="" shape="rect" coords="1193,542,1250,585">
    <area alt="TR22" href="reception/TR22.html" onclick="" shape="rect" coords="820,547,877,590">
    <area alt="TR23" href="reception/TR23.html" onclick="" shape="rect" coords="819,443,876,486">
    <area alt="TR47" href="reception/TR47.html" onclick="" shape="rect" coords="578,545,635,588">
    <area alt="TR48" href="reception/TR48.html" onclick="" shape="rect" coords="990,662,1047,705">
    <area alt="TR49.1" href="reception/TR49.1.html" onclick="" shape="rect" coords="1323,545,1380,588">
    <area alt="B2E15" href="reception/B2E15.html" onclick="" shape="rect" coords="46,184,117,216">
    <area alt="B1E11" href="reception/B1E11.html" onclick="" shape="rect" coords="469,227,540,259">
    <area alt="B2E11" href="reception/B2E11.html" onclick="" shape="rect" coords="690,265,761,297">
    <area alt="B1E15" href="reception/B1E15.html" onclick="" shape="rect" coords="1016,266,1087,298">
    <area alt="B1V46" href="reception/B1V46.html" onclick="" shape="rect" coords="301,835,372,867">
    <area alt="B1TR3" href="reception/B1TR3.html" onclick="" shape="rect" coords="547,731,603,786">
    <area alt="B1TR48" href="reception/B1TR48.html" onclick="" shape="rect" coords="1259,729,1315,784">
</map>

		</div>
	</body>
</html>



et celui CSS


body {
  padding-left: 11em;
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 15em;
  left: 1em;
  width: 10em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif;
font-size: 28px;		
	

		}
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
  
 
#id_conteneur{
	display:block;
	float:left;
	border-style: solid;
	border-color: grey;
	width:45%;
	height:45%;
}
 
img {
	max-width:100%;
	max-height:100%;
}



merci pour la réponse
Sujet clos
Aller à