Responsive Web Design - photo
Utilisez l'attribut width
Si l'attribut width est réglé à 100%, l'image sera réalisée conformément à la gamme supérieure et inférieure des fonctions sensibles:
Notez que dans l'exemple ci-dessus, l'image sera plus grand que son image originale. Nous pouvons utiliser max-width attribut une bonne solution à ce problème.
Utilisation max-width propriété
Si la propriété max-width est réglé à 100%, l'image ne sera jamais plus grande que sa taille d'origine:
Ajouter les pages d'image
Image de fond
L'image de fond peut répondre à redimensionner ou zoom.
Les trois suivants sont des méthodes différentes:
1. Si la propriété background-size est réglé sur «contenir», l'image d'arrière-plan sera adaptative ratio zone de contenu. Photos maintenir ses proportions inchangées:
Ceci est le code CSS:
Exemples
largeur: 100%;
hauteur: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
background-size: contenir;
border: 1px rouge solide;
}
Essayez »
2. Si la propriété background-size est réglé sur "100% 100%", l'image d'arrière-plan sera étendu pour couvrir toute la région:
Exemples
Ceci est le code CSS:
largeur: 100%;
hauteur: 400px;
background-image: url ( 'img_flowers.jpg ');
background-size: 100% 100% ;
border: 1px rouge solide;
}
Essayez »
3. Si la propriété background-size est réglé sur "couvrir", l'image d'arrière-plan est étendu pour être assez grand pour recouvrir complètement l'arrière-plan afin que l'image de fond région. Notez que la propriété reste les proportions de l'image si une partie de l'image d'arrière-plan ne peuvent pas être affichés dans la zone de positionnement de fond.
Ceci est le code CSS:
Exemples
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Essayez »
Différents dispositifs montrent une image différente
Les grandes photos peuvent être affichées sur le grand écran, mais ils ne montrent pas bien sur le petit écran. On n'a pas besoin de charger le petit écran dans la grande image, de sorte qu'il affecte la vitesse de chargement. Donc, nous pouvons utiliser des requêtes des médias, en fonction de l'appareil pour afficher une image différente.
La grande image suivante et petite image seront affichés sur différents appareils:
Exemples
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Essayez »
Vous pouvez utiliser des requêtes de médias min-device-width substitut min-width attribut, il détectera la largeur de l'appareil au lieu de la largeur du navigateur. Réinitialiser la taille du navigateur, taille de l'image ne change pas.
Exemples
body {
background-image: url ( 'img_smallflower.jpg ');
}
/ * Dispositif supérieur à 400px (aussi égal à): * /
@media seulement écran et (min-device -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}
Essayez »
HTML5 <image> élément
HTML5 <picture> élément peut être réglé de multiples images.
support du navigateur
| élément | |||||
|---|---|---|---|---|---|
| <Photo> | Ne supporte pas | 38,0 | 38,0 | Ne supporte pas | 25,0 |
<picture> élément similaire à la <video> et <audio> éléments. Différents dispositifs peuvent être des ressources, ressources premier ensemble d'utilisation préféré:
Exemples
<srcset Source = "img_smallflower.jpg" médias = "(max-width: 400px)">
<Srcset Source = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Fleurs">
</ Photo>
Essayez »
srcset propriété doit être la définition de la ressource image.
media attribut est facultatif, dans les médias requêtes CSS @media règle Voir les détails.
Ne pas soutenir <picture> éléments du navigateur , vous pouvez définir <img> élément à la place.