Comment obtenir la même mise à l'échelle des images sur la page en utilisant CSS ? (exemple)-tutoriel CSS-php.cn

Comment obtenir la même mise à l'échelle des images sur la page en utilisant CSS ? (exemple)

藏色散人

Libérer： 2018-08-13 17:11:08

original

6563 Les gens l'ont consulté

Lorsque nous parcourons la page ou dans le travail réel, nous rencontrons parfois des problèmes de mise à l'échelle de l'image. Cet article vous présentera donc la question de la mise à l'échelle égale des images CSS, c'est-à-dire de l'affichage des images CSS dans des proportions égales. J'espère que cela aidera les amis dans le besoin.

L'exemple de code spécifique pour afficher des images CSS dans des proportions égales est le suivant :

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css图片等比例显示代码示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .demo1-1 {
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .zoomImage {
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
        }
    </style>
</head>
<body>
<div class="demo1-1">
    <div class="zoomImage" style="background-image: url(2.png)"></div>
</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment obtenir la même mise à léchelle des images sur la page en utilisant CSS ? (exemple)

Remarque : L'attribut background-size spécifie la taille de l'image d'arrière-plan.

Valeurs possibles :

1. longueur

Définissez la hauteur et la largeur de l'image d'arrière-plan. La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».

2. Pourcentage

Définissez la largeur et la hauteur de l'image d'arrière-plan en pourcentage de l'élément parent. La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».

3. couverture

Agrandissez l'image d'arrière-plan à une taille suffisamment grande pour que l'image d'arrière-plan recouvre complètement la zone d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone d'ancrage d'arrière-plan.

4. contenir

Agrandissez l'image à sa taille maximale afin que sa largeur et sa hauteur s'intègrent parfaitement dans la zone de contenu.

Ce qui précède est l'introduction spécifique à l'affichage à échelle proportionnelle des images CSS. Il a une certaine valeur de référence et peut être utilisé comme référence.

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!