简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  css怎么实现图片在页面上以相同等比例显示缩放？（示例）

css怎么实现图片在页面上以相同等比例显示缩放？（示例）

藏色散人
藏色散人asal
2018-08-13 17:11:086526semak imbas

在我们浏览页面时或者实际工作中，偶尔会遇到图片缩放的问题。那么本篇文章就给大家介绍关于css 图片等比例缩放即css图片等比例显示的问题。希望对有需要的朋友有所帮助。

css图片等比例显示具体代码示例如下：

<!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>

效果如下图：

3302ae582a11d40c6670fab139c5ce4.png

注：background-size 属性规定背景图像的尺寸。

可能值：

1、length    

设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。


2、percentage    

以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 


3、cover   

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 


4、contain   

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。   

以上就是关于css图片等比缩放显示的具体介绍内容，具有一定的参考价值，可供大家借鉴。



Atas ialah kandungan terperinci css怎么实现图片在页面上以相同等比例显示缩放？（示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css auto Length background
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css样式如何覆盖原来的样式？利用vue自定义来实现覆盖elementui样式Artikel seterusnya：怎么用css样式制作好看的表单样式？（代码示例）

Artikel berkaitan

Lihat lagi