css3 实现图片等比例放大与缩小

在工作中，经常会碰到图片缩放的情况，比如服务器端返回的图片大小，可能大小不同，有的大，有的小，服务器端返回的图片大小我们不能控制的，但是在我们设计稿的时候，可能会规定每张图片的大小为固定的宽度和高度，比如200px*200px这样的。我们这边使用的是背景图片来做的，
但是如果直接使用 img标签这样引入图片貌似不行，因此我们目前只能使用背景图片来做。对于大一点的图片我们可以缩放的，但是对于很小
很小的图片，我们把他们拉伸的话，可能会有点点模糊，但是一般的情况下是不会有这种情况，因为对于图片的缩放，服务器端不太可能会返回
一张很小很小的图片回来，一般都是比较大的。

1. 等比例缩放(1:1)
我们先来看看实现图片等比例缩放的情况下：
html代码如下：

  1. <div class="demo1-1">
  2.   <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>
  3. </div>
  4. <div class="demo1-1">
  5.   <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>
  6. </div>
  7. <div class="demo1-1">
  8.   <div class="zoomImage" style="background-image: url(./images/3.png)"></div>
  9. </div>

css代码如下：

  1. .demo1-1 {
  2.   float: left;
  3.   width: 200px;
  4.   height: 200px;
  5.   overflow: hidden;
  6. }
  7. .zoomImage {
  8.   width: 100%;
  9.   height:;
  10.   padding-top: 100%;
  11.   overflow: hidden;
  12.   background-position: center center;
  13.   background-repeat: no-repeat;
  14.   background-size: cover;
  15.   -webkit-background-size: cover;
  16.   -moz-background-size: cover;
  17. }

如上代码就可以实现了。下面是简单的代码分析一下实现方式：
1-1 在父容器div.demo1-1中，定义容器显示的大小为 200px*200px；这个就是我们设计稿中显示的大小。
1-2 对于图片的div先设置如下样式：

  1. width: 100%;
  2. height: 0;
  3. padding-top: 100%;
  4. overflow: hidden;

如上代码height虽然设置为0，但是padding-top设置了100%，并且宽度width:100%, 高度div是按照1:1的方式来实现的。
至于为什么需要使用padding-top来实现 ，可以看我这篇文章

下面如下样式：

  1. background-position: center center;
  2. background-repeat: no-repeat;
  3. background-size: cover;
  4. -webkit-background-size: cover;
  5. -moz-background-size: cover;

是让背景图片居中显示，并且不重复，且背景大小覆盖整个容器就可以了；

下面是所有的代码了：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.     .demo {
  8.       width: 100%;
  9.       height: 300px;
  10.       overflow: hidden;
  11.     }
  12.     .demo1-1 {
  13.       float: left;
  14.       width: 200px;
  15.       height: 200px;
  16.     }
  17.     .zoomImage, .zoomImage2, .zoomImage3{
  18.       width: 100%;
  19.       height: 0;
  20.       padding-top: 100%;
  21.       overflow: hidden;
  22.       background-position: center center;
  23.       background-repeat: no-repeat;
  24.       background-size: cover;
  25.       -webkit-background-size: cover;
  26.       -moz-background-size: cover;
  27.     }
  28.     .zoomImage2 {
  29.       padding-top: 75%;
  30.     }
  31.     .zoomImage3 {
  32.       padding-top: 133.33%;
  33.     }
  34.   </style>
  35. </head>
  36. <body>
  37.   <h2>第一张图片633*950，第二张图片1280*800，第三张图片100*100</h2>
  38.   <div class="demo">
  39.     <h3>对上面的三张图片的宽和高分别等比例缩放到200*200像素(1:1)</h3>
  40.     <div class="demo1-1">
  41.       <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>
  42.     </div>
  43.     <div class="demo1-1">
  44.       <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>
  45.     </div>
  46.     <div class="demo1-1">
  47.       <div class="zoomImage" style="background-image: url(./images/3.png)"></div>
  48.     </div>
  49.   </div>
  50.  
  51.   <div class="demo">
  52.     <h3>对上面的三张图片的宽和高进行4:3的缩放</h3>
  53.     <div class="demo1-1">
  54.       <div class="zoomImage2" style="background-image: url(./images/1.jpg)"></div>
  55.     </div>
  56.     <div class="demo1-1">
  57.       <div class="zoomImage2" style="background-image: url(./images/2.jpeg)"></div>
  58.     </div>
  59.     <div class="demo1-1">
  60.       <div class="zoomImage2" style="background-image: url(./images/3.png)"></div>
  61.     </div>
  62.   </div>
  63.  
  64.   <div class="demo">
  65.     <h3>对上面的三张图片的宽和高进行3:4的缩放</h3>
  66.     <div class="demo1-1">
  67.       <div class="zoomImage3" style="background-image: url(./images/1.jpg)"></div>
  68.     </div>
  69.     <div class="demo1-1">
  70.       <div class="zoomImage3" style="background-image: url(./images/2.jpeg)"></div>
  71.     </div>
  72.     <div class="demo1-1">
  73.       <div class="zoomImage3" style="background-image: url(./images/3.png)"></div>
  74.     </div>
  75.   </div>
  76. </body>
  77. </html>

demo查看

css3 实现图片等比例放大与缩小的更多相关文章

  1. vue 实现 裁切图片 同时有放大、缩小、旋转功能

    实现效果: 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 大概原理: 利用h5 FileReader 对象, 获取 <input ty ...

  2. 在 .NET Core 下使用 SixLabors.ImageSharp 操作图片文件（放大、缩小、裁剪、加水印等等）的几个小示例

    1. 基础 1.1  将图片的宽度和高度缩小一半 直接贴代码了: <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup ...

  3. div内部实现图片旋转、放大、缩小、拖拽

    药药,切克闹,一人我编码累,累把那bug写成堆.秋高气爽空气干燥你一定dei多喝水,过完了这周我就要回去.趁还有几天.你尽情的来跟我怼~~~ 新的一年,很久没更博客了,眼看十一要来了,听说过了十一就等 ...

  4. CAD中如何将图形按一定的比例放大或缩小

    1.双击CAD快捷键图标,打开CAD绘图界面: 2.以正五边形为例,点击左边的正多边形按钮: 3.绘制好后得到五边形图形: 4.给图形做好尺寸标注方便直观比较: 5.选择图像在命令行输入sc命令,按键 ...

  5. CSS3实现图片鼠标悬浮放大效果

    .excerpt .focus a img{ -webkit-transition: all ease .3s; transition: all ease .3s }.excerpt .focus a ...

  6. 响应式网页，让div的高和宽保持等比例放大、缩小

    1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) a ...

  7. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  8. 在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用

    cropbox.js 是一个实现了图像在线剪裁的 jQuery .YUI 插件和 JavaScript 库. 上DEMO: 上传的图片可以使用滚轮放大与缩小当前选择的图片,后点击“裁切”后,在右侧的预 ...

  9. vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

随机推荐

  1. JavaSE 常用类与其方法

    1.基本数据类型比较用:== 2.引用数据类型比较用:equals方法 如果引用数据类型使用==比较的话,比较的是地址值 toString类 对象调用toString()需要重写本方法: 在封装类中, ...

  2. 自定义SharePoint2013 master page

    SharePoint uses templates to define and render the pages that a site displays. The structure of a Sh ...

  3. 3038 3n+1问题

    3038 3n+1问题  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 3n+1问题是一个简单有趣而又没有 ...

  4. 【代码笔记】Web-ionic-创建APP的架构

    一,创建app的时候,index.html的主要架构. <!DOCTYPE html> <html> <head> <meta charset="u ...

  5. debian+python3.5环境下安装paramiko模块：

    debian+python3.5环境下安装paramiko模块: 1.确保安装了操作系统安装了libssl-dev,zlib1g-dev  (redhat,centos下这两包包名为openssl-d ...

  6. loadrunner 脚本优化-关联函数web_reg_save_param()函数详解

    脚本优化-关联函数web_reg_save_param()函数详解   by:授客 QQ:1033553122 Insert->New Step,打开Add Step对话框 选择函数web_re ...

  7. flask day01

    目标:搭建好一个flask架构,并且可以运行起来,能够访问 ## 一丶配置环境 比较简单,只需要配一个flask pip3 install flask #也可以使用pip install flask ...

  8. k-means算法之见解（一）

    k-menas算法之见解 主要内容: 一.引言 二.k-means聚类算法 一.引言: 先说个K-means算法很高大上的用处,来开始新的算法学习.美国竞选总统,选票由公民投出,总统由大家决定.在20 ...

  9. linux networking

    ip route解读 default via 192.168.1.1 dev wlan0 dev wlan0 proto kernel scope link src 192.168.1.100 htt ...

  10. Java 中声明和语句

    public class Example { int[] arr = new int[4]; // OK! 定义属性并初始化 arr[0] = 1; // 错误! 这是语句,必须写在方法体里 arr[ ...