css3 实现图片等比例放大与缩小
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>
css3 实现图片等比例放大与缩小的更多相关文章
- vue 实现 裁切图片 同时有放大、缩小、旋转功能
实现效果: 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 大概原理: 利用h5 FileReader 对象, 获取 <input ty ...
- 在 .NET Core 下使用 SixLabors.ImageSharp 操作图片文件（放大、缩小、裁剪、加水印等等）的几个小示例
1. 基础 1.1 将图片的宽度和高度缩小一半 直接贴代码了: <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup ...
- div内部实现图片旋转、放大、缩小、拖拽
药药,切克闹,一人我编码累,累把那bug写成堆.秋高气爽空气干燥你一定dei多喝水,过完了这周我就要回去.趁还有几天.你尽情的来跟我怼~~~ 新的一年,很久没更博客了,眼看十一要来了,听说过了十一就等 ...
- CAD中如何将图形按一定的比例放大或缩小
1.双击CAD快捷键图标,打开CAD绘图界面: 2.以正五边形为例,点击左边的正多边形按钮: 3.绘制好后得到五边形图形: 4.给图形做好尺寸标注方便直观比较: 5.选择图像在命令行输入sc命令,按键 ...
- CSS3实现图片鼠标悬浮放大效果
.excerpt .focus a img{ -webkit-transition: all ease .3s; transition: all ease .3s }.excerpt .focus a ...
- 响应式网页，让div的高和宽保持等比例放大、缩小
1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) a ...
- jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...
- 在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用
cropbox.js 是一个实现了图像在线剪裁的 jQuery .YUI 插件和 JavaScript 库. 上DEMO: 上传的图片可以使用滚轮放大与缩小当前选择的图片,后点击“裁切”后,在右侧的预 ...
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
随机推荐
- 现如今的CDN网站加速技术，细说CDN
CDN技术应用越来越广泛的被各大互联网公司所应用.已经成为了互联网企业离不开的一种网络运维方式.什么是CDN? CDN 利用全局负载均衡技术将用户的访问指向离用户最近的工作正常的流媒体服务器上,由流媒 ...
- Class<?> getClass()
getClass()方法属于Object的一部分,它将产生对象的类,并且在打印该类时,可以看到该类类型的编码字符串,前导"["表示这是一个后满紧随的类型的数组,而紧随的" ...
- 【19】中间者模式（Mediator Pattern）
一.引言 在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 二. 中介者模式的介绍 2.1 ...
- polyfill-eventsource added missing EventSource to window ie浏览器 解决方案
今天遇到一个 ie浏览器显示空白,报错内容是: polyfill-eventsource added missing EventSource to window的问题, import 'babel-p ...
- 西安OpenParty11月29日活动高清图文回顾——新增西安APEC蓝美图！
本次活动由西安OpenParty负责线下活动组织运营,线上由InfoQ-QClub.OSChina协办. OSChina活动召集帖:运维为王——应用系统.DevOps与Docker(11月29日) I ...
- 网页html随机切换背景图片
首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...
- 9.4、__del__、__doc__、__dict__、__module__、__getitem__、__setitem__、__delitem__、__str__、__repr__、__call__
相关内容: __del__.__doc__.__dict__.__module__.__getitem__.__setitem__.__delitem__.__str__.__repr__.__cal ...
- BigDecimal常被忽略的问题
一:相除精度丢失的问题 BigDecimal的api除法相对加减乘要实现的复杂多了,只介绍常用的我遇到的问题: 问题:两数相除,如果9/3=3整除没问题,但是10/3=0.33333333...... ...
- 百度纯CSS生成菜单
首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a ...
- centos6.5下oracle11g开机自动启动方法一
转裁于 方法一 https://blog.csdn.net/wx5040257/article/details/77875690 方法二 https://blog.csdn.net/wx504025 ...