Proportion de la photo en responsive

11 juin 2018 à 17:58:32

Bonjour,

Dans le cadre de l’exercice du CV en responsive j'ai un problème avec la photo de mon en-tête : quand je rétrécie un maximum la largeur de l'écran ma photo s’écrase sur sa largeur en ne respectant pas ses proportions initiales. J'ai pourtant vu les travaux des autres élèves ou la photo s'adapte en se diminuant proportionnellement pour s'insérer dans l'espace restreint.

Quelqu'un pour un élément de réponse? --> n'hésitez pas à me donner votre avis sur la cohérence de mon code, j'ai fait des petites améliorations à droite et à gauche et j'ai peur que ça manque de logique dans son ensemble..

Merci d'avance!

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>Mathieu Alama</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="bloc_page">
			<aside>	
			</aside>
			<div id="contenu">
				<header>
					<div id="presentation">
						<h1>Mathieu Alama</h1>
						<p id="legende">Chasseur de chimère</p>
					</div>	
						<a href="vladimir-nabokov.jpg">		
						<img src="vladimir-nabokov-mini.jpg" alt="Chasseur" id= "image1"/>
						</a>
				</header>	
				<section>
					<div class= "article">
						<h2>Mon expérience</h2>		
						<ul>
							<li><span class= "dates">De 2008 à 2009 :</span> Conseiller clientèle B to B - ARVAL Lease<br />Vente de produits de financement automobile pour les parcs automobiles de PME et PMI</li>
							<li><span class= "dates">De 2011 à 2016 :</span> Chef de secteur B to B - Vin<br />Promotion, mise en avant, vente de produit vinicole auprès d'un parc clientèle de grande distribution</li>
							<li><span class= "dates">De 2016 à 2018 :</span> Agent commercial B to B - Vin<br />Prospection, mise en avant, vente de produit vinicole haut de gamme auprès du circuit traditionnel "café, hotel, restaurant"</li>
						</ul>
					</div>	
					<div class= "article">
						<h2>Mes compétences</h2>
						<ul>
							<li>Vente, Négociation</li>
							<li>Marketing, Marketing digitale et Communication</li>
							<li>Comptabilité financière et analytique</li>
							<li>Peinture sur corps nus : <a href="lien.jpg">porfolio</a></li>
							<li>Anglais niveau C1</li>
						</ul>
					</div>	
					<div class= "article">
						<h2>Ma formation</h2>
						<ul>
							<li>Auto Formation (MOOC)</li>
							<li>Licence Pro Commercialisation des Vins</li>
							<li>DEES Communication</li>
							<li>BTS Action Commercialisation</li>
						</ul>
					</div>	
				</section>	
			</div>
		</div>	
	</body>
</html>

body
{
    font-family: Sofia-Regular, Arial, Verdana, sans-serif;
    background-image: url("fond.jpg");
}

#bloc_page
{
    margin: auto;
    padding: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@font-face 
{
    font-family: 'Sofia-Regular';
    src: url('Sofia-Regular.otf');
}


a /* lien */
{
   text-decoration: none;
   color: rgb(13, 134, 255);
   font-style: italic;
}
   
a:hover
{
   color: rgb(204, 130, 253);
}

aside /*mise en place des blocs*/
{
  flex: 16%;
  background-color: rgb(198, 107, 17);
  opacity: 0.5;
}

section
{
  display: flex;
}

header /*mise en place de l'en tête*/
{
    display: flex;
    justify-content: space-between;
    margin-right: 5%;
    margin-left: 5%;
}

#presentation
{
    flex: 2;
    width: 100%;
    height: 100%;
    text-align: center;
}


#image1
{
    flex: 1;
    width: 100%;
    height: 100%;
}

/*.......................mode responsive*/
@media screen and (max-width: 1024px) 
{
   aside
   {
    display: none;
   }

   section
   {
    flex-direction: column;
   }
}

Emphytos

11 juin 2018 à 19:11:53

Bonjour,

dans ton css tu écris :

    width: 100%;
    height: 100%;

C'est normal que l'image prenne toute la place dans son container étant donné que tu as mis une une largeur et une hauteur de 100%.

Guklam

11 juin 2018 à 19:30:33

Salut,

Retire le width: 100%;

-
Edité par Guklam 11 juin 2018 à 19:30:45

Matmath05

15 juin 2018 à 13:59:56

Merci pour vos réponse,

Ca marche... mais j'ai vu des cas ou la photo rapetissait un peu pour s'adapter à un tout petit écran, quelqu'un sait faire ça?

Merci encore!

KévinH

15 juin 2018 à 14:45:23

Oui. Intéresse toi à la propriété CSS -> object-fit : cover; ça peut te permettre de ne pas déformer ton image au redimensionnement.

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

Pour ce qui est de rétrécir une image quand tu rétrécis la page, tu as plusieurs solution.

Une des solutions est : il faut que tu englobe ton image par un conteneur (div) et ensuite tu met ton image a width : 100%; (il prendra 100% de ta div précédemment créée).

Essaye ça en mettant ta propre image de test. ça fonctionne chez moi !

<!DOCTYPE html>
<html>
<head>
<style>
div {
	width: 50%;
}
img {
	width: 100%;
}
</style>
	<title>Test</title>
</head>
<body>
	<div>
		<img src="1.jpg">
	</div>
</body>
</html>

Matmath05

18 juin 2018 à 10:13:08

Merci pour cette réponse,

Ca marche mais la photo est très grande, ainsi que proportionnelle à la taille de la page (plus la page est grande plus la photo est grande). Ce que je voudrais réussir à obtenir c'est une photo de taille fixe qui rétrécie juste un peu quand la largeur de la page est vraiment toute petite.

Dans l'exemple ci-dessous (un CV corrigé) ça marche parfaitement mais je n'identifie pas du tout l'astuce dans le code...

Quelqu'un pour cette ENIGME? :

<!DOCTYPE html>
<html lang fr>
  <head>

  	<!-- En-tête de la page -->
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Mon CV</title>
  </head>

  <body>
    <!-- Détermination du bloc page -->
    <div id="bloc_page">
        <aside>
            <img src="img/lisere.png" id="lisere" alt="lisere" />
        </aside>
        <div id="contenu">
            <header> <!-- Construction de l'en-tête -->
                <div id="presentation">
                    <h1>Sarah Mignon</h1> 
                    <p>Actuellement étudiante en école de commerce</p>
                </div>
                <a href="img/image_cv.jpg" ><img id="photo_CV" src="img/image_mini_cv.jpg" alt="Photo CV" title="Cliquez pour agrandir" /></a> <!-- Une photo miniature sur laquelle on peut cliquer pour la voir en plus grand -->
            </header>
            	
            	<!-- 3 sections délimitées par des titres différents -->
            <section>
                <div class="section">
                    <h2>Mon expérience</h2>
                    <ul>
                	   <li><strong>De 2012 à 2015</strong> : participation à diverses associations, notamment dédiées aux enfants malades.</li>
                        <li><strong>De 2016 à 2018</strong> : divers stages réalisés, en association, en cabinet : expérience notamment en contrôle de gestion et en audit.</li>	
                    </ul>
                </div>

                <div class="section">
                    <h2>Mes compétences</h2>
                    <ul>
                        <li>Utilisation du Pack Office</li>
                	   <li>Quelques notions en langage C et Python appris sur <a href="https://openclassrooms.com">OpenClassrooms</a></li>
                	</ul>
                </div>

                <div class="section">
                    <h2>Ma formation</h2>
                	<p>Bachelor en école durant 3 ans, puis master spécialisé en finance durant 2 ans !</p>
                </div>
            </section>
        </div>
    </div>
  </body>
</html>

/* Eléments principaux définis*/

@font-face /*police particulière*/
{
    font-family:'quintessentialregular';
    src: url('quintessential/quintessential.eot');
    src: url('quintessential/quintessential.eot?iefix') format('embedded-opentype'),
         url('quintessential/quintessential.woff') format('woff'),
         url('quintessential/quintessential.ttf') format('truetype'),
         url('quintessential/quintessential.svg#quintessentialregular') format('svg');
}

#bloc_page
{
    margin: auto;
    padding: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#lisere
{
	width : 100px;
	height: 100%;
}


@media all and (max-width: 1024px)
{
	#lisere
	{
		display: none;
	}
}

body /*mise en forme du texte */
{
    color: black;
    font-family: "Times New Roman", serif;
    background : url("img/fond_cv.png");
}


/* Mise en page de l'en-tête */

header
{
    display: flex;
    justify-content: space-between;
    margin-right: 5%;
    margin-left: 5%;
}

#presentation
{
    width: 100%;
    height: 100%;
    text-align: center;
    flex: 2;
}

#photo_CV 
{
    width: 100%;
    height: 100%
    flex: 1;
}

header img /* bordure appliquée à la photo CV*/
{
    border: 2px solid black ;
}

header h1 /* mise en forme du titre*/
{
    font-family: 'quintessentialregular', Arial, serif;
    color: #201599;
    text-shadow: 2px 2px 2px blue;
    font-size: 2.3em;
}


/* Mise en page de la section*/

section
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

@media all and (max-width: 1024px)
{
	section
		{
			flex-direction: column;
		}
}

h2 /* mise en forme des titres */
{
    color: #758A9C;
    font-family: 'quintessentialregular', Arial, serif;
    font-size: 1.5em;
    text-decoration: underline;
}

.section
{
    margin-right: 1%;
    margin-left: 1%;
}

.section:nth-child(3)
{
    margin-right: 20%;
}

a /* mise en page du lien */
{
    text-decoration: none;
    color: #201599;
}

a:hover /*mise en page du lien lorsque l'on passe la souris dessus*/
{
    color: #758A9C;
    text-decoration: underline;
}