Comment définir l'image pour qu'elle soit aussi large que le conteneur en CSS-tutoriel CSS-php.cn

Comment définir l'image pour qu'elle soit aussi large que le conteneur en CSS

WBOY

Libérer： 2021-12-03 10:20:16

original

3582 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut width pour définir l'élément d'image pour qu'il soit aussi large que le conteneur. Cet attribut est utilisé pour définir la largeur de l'élément lorsque la valeur de l'attribut est "100%", la largeur de l'élément. element est la largeur de l'élément parent, c'est-à-dire la largeur du conteneur, la syntaxe est "picture element {width:100%;}".

Comment définir l'image pour qu'elle soit aussi large que le conteneur en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir l'image pour qu'elle soit aussi large que le conteneur en CSS

En CSS, il suffit d'utiliser l'attribut width de l'image pour définir l'image pour qu'elle soit aussi large que le conteneur. vous devez modifier la valeur de l'attribut de largeur de l'image. Il suffit de la définir sur 100 %. L'attribut

width définit la largeur de l'élément. Définit la largeur en pourcentage en fonction de la largeur du bloc conteneur (élément parent) lorsque l'unité de valeur de l'attribut est %. , qui correspond au pourcentage de largeur du conteneur.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
<style>
    div{
        width: 200px; 
        height: 200px;
        border:1px solid #000000;
        }
    div img{
        width: 100%;
        }
</style>
<div>
    <img  src="1118.02.png" / alt="Comment définir l'image pour qu'elle soit aussi large que le conteneur en CSS" >
</div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment définir limage pour quelle soit aussi large que le conteneur en CSS

De même, si vous souhaitez que la hauteur soit aussi haute que le conteneur, il vous suffit d'ajouter l'attribut de hauteur et de définir la valeur de l'attribut à 100 % .

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!