image
Responsive Web Design - Image
Utiliser l'attribut width
Si l'attribut width est défini sur 100%, l'image sera implémenté selon les plages supérieures et inférieures Fonctions réactives :
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
<p>调整浏览器窗口查看图像是如何扩展的。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur "Exécuter Bouton "Instance" pour visualiser l'instance en ligne
Notez que dans l'exemple ci-dessus, l'image sera plus grande que son image d'origine. Nous pouvons très bien utiliser l'attribut max-width pour résoudre ce problème.
Utilisez l'attribut max-width
Si l'attribut max-width est défini sur 100 %, l'image ne sera jamais plus grande que sa taille d'origine :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
<p>调整浏览器大小，在宽度小于 460px 时查看图片比例变化。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Ajouter des images à la page Web
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>调整浏览器窗口大小查看内容变化。</p>
</div>
</body>
</html>Exécuter l'instance ?
Cliquez sur « Exécuter l'instance » bouton pour afficher l'instance en ligne
Images d'arrière-plan
Les images d'arrière-plan peuvent être redimensionnées ou mises à l'échelle de manière réactive.
Voici trois méthodes différentes :
1. Si la propriété background-size est définie sur "contain", l'image d'arrière-plan s'adaptera proportionnellement à la zone de contenu. L'image garde ses proportions :
Voici le code CSS :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
</style>
</head>
<body>
<p>调整浏览器大小查看效果。</p>
<div></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
2. 100%", l'arrière-plan L'image s'étirera pour couvrir toute la zone :
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>调整浏览器大小查看效果。</p>
<div></div>
</body>
</html>Exécution de l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
3. Si la propriété background-size est définie sur "cover", l'image d'arrière-plan sera agrandie pour être suffisamment grande pour qu'elle recouvre complètement la zone d'arrière-plan. Notez que cette propriété conserve les proportions de l'image donc Certaines parties de l'image d'arrière-plan ne peuvent pas être affichées dans la zone d'ancrage d'arrière-plan.
Voici le code CSS :
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
background-size: cover;
border: 1px solid red;
}
</style>
</head>
<body>
<p>调整浏览器大小查看效果。</p>
<div></div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Différents appareils affichent des images différentes
Les images de grande taille peuvent être affichées sur grand écrans, mais sur petits écrans Cela ne s'affiche pas vraiment bien à l'écran. Nous n’avons pas besoin de charger de grandes images sur un petit écran, car cela affecterait la vitesse de chargement. Nous pouvons donc utiliser des requêtes multimédias pour afficher différentes images en fonction de différents appareils.
Les grandes et petites images suivantes seront affichées sur différents appareils :
>
Cliquez sur "Exécuter l'instance" bouton pour afficher l'instance en ligne
Vous pouvez utiliser la largeur min-device-width de la requête multimédia au lieu de l'attribut min-width, il détectera la largeur de l'appareil au lieu de la largeur du navigateur. La taille de l'image ne change pas lorsque le navigateur est redimensionné.Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
/* For width smaller than 400px: */
body {
background-repeat: no-repeat;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
}
</style>
</head>
<body>
<p style="margin-top:360px;">调整浏览器宽度，背景图片在小于 400 px 时将改变。</p>
</body>
</html>Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Élément HTML5 <picture>
L'élément <picture> de HTML5 peut définir plusieurs images.
Les navigateurs prennent en charge l'élément
| 函数 |  |  |  |  |  |
| :visited | 不支持 | 38.0 | 38.0 | 不支持 | 25.0 |
<picture> similaire aux éléments <video> et <audio>. Différentes ressources peuvent être configurées. Le premier ensemble de ressources est celui préféré :
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
/* For device width smaller than 400px: */
body {
background-repeat: no-repeat;
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
}
}
</style>
</head>
<body>
</body>
</html>Instance en cours d'exécution»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
srcset L'attribut est obligatoire et définit la ressource image. L'attribut
media est facultatif, les détails peuvent être trouvés dans la règle CSS @media de la requête média.
Pour les navigateurs qui ne prennent pas en charge l'élément <picture>, vous pouvez également définir l'élément <img> à la place.
