Skip to main content
M
Michel62740
Participant
July 12, 2021
Question

Adapter l'image à l'écran

  • July 12, 2021
  • 2 replies
  • 192 views

Bonjour

Est-il possible d'avoir les images qui s'adaptent à l'écran sur le quel on regarde le site ?

Merci

Michel

This topic has been closed for replies.

2 replies

B i r n o u
B i r n o u
Legend
July 13, 2021

en complément de ce que vous a dit @Nancy OShea , cet article bien que peu technique, approche des angles intéressants et reste très instructif sur la manière de concevoir des images à fortes tailles

https://design4users.com/hero-images-in-web-design/

 

quant à celui ci, la technique est couverte sur divers aspects

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

 

sans oublier que l'image peut également être intégrallement manipulée par des CSS

https://css-tricks.com/perfect-full-page-background-image/

 

j'espère que cela vous éclairera et vous permettra d'y voir plus clair

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 12, 2021

    Yes. 

     

    OPTION #1:

    Use the <picture> element with different sized images for various devices -- large, medium, small, extra-small.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

     

    OPTION #2:

    Use a CSS width property of 100%.  The downside is that all devices receive the same amount of bandwidth and small images will appear distorted on larger devices.

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Image Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {width: 95%; margin: 0 auto;}

img {border:8px solid #EEE; box-shadow: 3px 1px 4px #666}

.fluid {width: 100%; 
</style>

</head>
<body>
<h2>OPTION #1</h2>
<p>Picture Element &amp; SRCSET</p>
<picture>
<source srcset="https://dummyimage.com/1100x100.jpg" media="(min-width: 1100px)">
<source srcset="https://dummyimage.com/900x100.jpg" media="(min-width: 900px)">
<source srcset="https://dummyimage.com/500x100.jpg" media="(min-width: 500px)">
<img src="https://dummyimage.com/300x100.jpg" alt="placholder">
</picture>

<h2>OPTION #2</h2>
<p>Single Fluid Image</p>
<img class="fluid" src="https://dummyimage.com/500x100" alt="placeholder">
</body>
</html>

     

     

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices