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

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

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

<div class="demo1-1">

  <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>

</div>

<div class="demo1-1">

  <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>

</div>

<div class="demo1-1">

  <div class="zoomImage" style="background-image: url(./images/3.png)"></div>

</div>

css代码如下：

.demo1-1 {

  float: left;

  width: 200px;

  height: 200px;

  overflow: hidden;

}

.zoomImage {

  width: 100%;

  height:;

  padding-top: 100%;

  overflow: hidden;

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  -webkit-background-size: cover;

  -moz-background-size: cover;

}

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

width: 100%;

height: 0;

padding-top: 100%;

overflow: hidden;

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

下面如下样式：

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-moz-background-size: cover;

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

下面是所有的代码了：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    .demo {

      width: 100%;

      height: 300px;

      overflow: hidden;

    }

    .demo1-1 {

      float: left;

      width: 200px;

      height: 200px;

    }

    .zoomImage, .zoomImage2, .zoomImage3{

      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;

    }

    .zoomImage2 {

      padding-top: 75%;

    }

    .zoomImage3 {

      padding-top: 133.33%;

    }

  </style>

</head>

<body>

  <h2>第一张图片633*950，第二张图片1280*800，第三张图片100*100</h2>

  <div class="demo">

    <h3>对上面的三张图片的宽和高分别等比例缩放到200*200像素(1:1)</h3>

    <div class="demo1-1">

      <div class="zoomImage" style="background-image: url(./images/1.jpg)"></div>

    </div>

    <div class="demo1-1">

      <div class="zoomImage" style="background-image: url(./images/2.jpeg)"></div>

    </div>

    <div class="demo1-1">

      <div class="zoomImage" style="background-image: url(./images/3.png)"></div>

    </div>

  </div>

  <div class="demo">

    <h3>对上面的三张图片的宽和高进行4:3的缩放</h3>

    <div class="demo1-1">

      <div class="zoomImage2" style="background-image: url(./images/1.jpg)"></div>

    </div>

    <div class="demo1-1">

      <div class="zoomImage2" style="background-image: url(./images/2.jpeg)"></div>

    </div>

    <div class="demo1-1">

      <div class="zoomImage2" style="background-image: url(./images/3.png)"></div>

    </div>

  </div>

  <div class="demo">

    <h3>对上面的三张图片的宽和高进行3:4的缩放</h3>

    <div class="demo1-1">

      <div class="zoomImage3" style="background-image: url(./images/1.jpg)"></div>

    </div>

    <div class="demo1-1">

      <div class="zoomImage3" style="background-image: url(./images/2.jpeg)"></div>

    </div>

    <div class="demo1-1">

      <div class="zoomImage3" style="background-image: url(./images/3.png)"></div>

    </div>

  </div>

</body>

</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. Java坦克大战（二）

    本文紧接上一篇讲解坦克大战这个项目,因为当初在学习的时候,是以这个案例逐步学习Java基础的,过程是先讲知识点,再将知识点逐步的融入到项目中,即给坦克添加新的功能.之前的Demo练习,想都记录下来.这 ...

  2. Why in the code “456”+1, output is “56”

    Question: #include <iostream> int main() { std::cout << "25"+1; return 0; } I ...

  3. Spring基于纯注解方式的使用

    经过上篇xml与注解混合方式,对注解有了简单额了解,上篇的配置方式极大地简化了xml中配置,但仍有部分配置在xml中进行,接下来我们就通过注解的方式将xml中的配置用注解的方式实现,并最终去掉xml配 ...

  4. 解决vue-cli不能初始化webpack模板的问题(vue init卡住了，解决办法)

    报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去 ...

  5. HTML-CSS写抽屉网的置顶区域

    1.在pycharm的已有工程中新建一个html文件. 2.在<body></body>标签内部写入要内容: <div class='head-box' > < ...

  6. Python之历史

    一.python简单介绍 python的创始人:吉多·范罗苏姆(Guido van Rossum),于1989年开始编写,到1991年完成了第一个python编译器.它是用C语言实现的,并能够调用C语 ...

  7. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  8. 根据学习廖雪峰老师的git教程做的笔记

    根据学习廖雪峰老师的git教程做的笔记 安装git 进行git的配置 配置您的用户名和邮箱地址,使用--global 这个参数表明了在此台机器上的所有仓库都会使用该配置 $ git config -- ...

  9. XP环境下C# 调用Pocess.start()时提示文件找不到的错误解决办法

    错误提示如下: System.ComponentModel.Win32Exception (0x80004005): 系统找不到指定的文件. 在 System.Diagnostics.Process. ...

  10. [20170623]利用传输表空间恢复部分数据.txt

    [20170623]利用传输表空间恢复部分数据.txt --//昨天我测试使用传输表空间+dblink,上午补充测试发现表空间设置只读才能执行impdp导入原数据,这个也很好理解.--//这样的操作模 ...