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

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

藏色散人original: 2018-08-13 17:11:086526parcourir

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>

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!

css auto Length background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment écraser le style original avec le style CSS ? Utilisez la personnalisation de vue pour remplacer le style elementuiArticle suivant：Comment écraser le style original avec le style CSS ? Utilisez la personnalisation de vue pour remplacer le style elementui

Articles Liés

Voir plus