Comment définir l'étirement de l'image en CSS

Comment définir l'étirement de l'image en CSS : créez d'abord une page html ; puis ajoutez une balise div à la page HTML, et ajoutez une balise d'image img à l'intérieur de la balise puis écrivez directement le CSS dans le style de la balise div ; ; enfin, définissez la hauteur et la largeur de l'image à 100%.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Ouvrez vscode et créez une page html pour démontrer comment CSS étend les paramètres de l'image en fonction de la résolution. Si vous n'avez pas vscode, vous pouvez utiliser d'autres éditeurs HTML ou même des fichiers texte. Notez simplement que le suffixe du fichier doit être .html

au même niveau. répertoire de la page de test, ajoutez une image de démonstration À des fins de démonstration, la résolution de l'image est relativement petite

Ajoutez une balise div à la page de test et ajoutez. une image img à l'intérieur de la balise tag, définissez l'adresse src de l'image sur l'image de démonstration ajoutée à l'étape précédente. Ouvrez cette page de test dans le navigateur et vous pouvez voir que l'image est présentée sur le navigateur

Dans la balise div, écrivez directement le style CSS, définissez la largeur du div sur 500 pixels, la hauteur sur 300 pixels et la bordure sur une boîte rouge de 1 pixel. Ouvrez-le à nouveau dans le navigateur et vous pourrez voir l'image, qui ne remplit pas tout l'espace div

[Apprentissage recommandé :

Tutoriel vidéo CSS]

Remarque : Ceci L'écriture directe du style CSS dans la balise est appelée un style en ligne, qui a le même effet que l'écriture du CSS à l'extérieur. Définissez simplement la hauteur et la largeur de l'image à 100 %. À des fins de démonstration ici, toutes les balises img sont définies à 100 % et la forme d'écriture CSS externe est utilisée. Depuis l'effet d'affichage du navigateur, vous pouvez voir que l'image s'étire et remplit tout l'espace div

Et si l'image utilise une image d'arrière-plan et n'est pas sous la forme d'une balise img ? Si elle est affichée, l'image sera répétée sur les axes x et y par défaut et ne sera pas étirée. Elle remplira toujours l'espace de ce div

Si vous voulez un. background image, également Pour étirer pour remplir tout l'espace div, vous devez définir la

background-size de l'image d'arrière-plan : 100% 100% Comme le montre l'effet de course, l'effet de l'étirement automatique en fonction à la résolution est bel et bien atteinte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!