<img src="../images/bg1.jpg" alt="" />
       img {

            /*等宽缩小不变形*/

            /*width: 100%;*/

            /*二选一*/

            /*等高缩小不变形*/

            height: 100%;

        }

CSS实现图片等比例缩小不变形的更多相关文章

  1. css实现图片等比例缩放

    <div class="box"> <img src="01.jpg"/> </div> .box{ } //只要给图片设置 ...

  2. css中图片等比例缩放

    li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }

  3. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  4. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

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

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  6. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

  7. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  8. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  9. 【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧

    原文: http://blog.csdn.net/oulihong123/article/details/54601030 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果 ...

随机推荐

  1. Java基础知识错误分析

    答案:A,C 解析: 题目2: 答案:B 解析: 题目3: 答案:A 解析: 题目4: 答案:D 解析: 题目5: 答案:C 题目六: 答案:C 解析:

  2. Linux基础之-Bash命令优先级

    一. Bash简介 命令解释器,也就是 Bourne Again Shell,起源于shell.shell俗称壳,它是指UNIX系统下的一个命令解析器:主要用于用户和系统的交互.UNIX系统上有很多种 ...

  3. Perl学习笔记(2)----正则表达式数字匹配的一个疏忽

    <Perl语言入门>第15章习题第2题如下: 用 given-when 结构写一个程序,根据输入的数字,如果它能被3整除,就打印“Fizz”:如果它能被5整除,就打印“Bin”:如果它能被 ...

  4. centos系统移植

    今天将一个服务器上面的硬盘拆掉放到安装到另外一个服务器上面,硬盘里已经安装系统为centos6.0. 服务器 为dell的1850,好吧,在今天我还有幸搞这种“屎”前的服务器还是很幸运的! 硬盘换了之 ...

  5. 【转】Java中的多线程你只要看这一篇就够了

    https://www.jianshu.com/p/40d4c7aebd66 引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的, ...

  6. February 21 2017 Week 8 Tuesday

    To make each day count. 让每一天都物有所值. We always want to make our life meaningful, however, the acutal f ...

  7. webpack学习（四）extract-text-webpack-plugin插件

    二.extract-text-webpack-plugin插件 从 bundle 中提取文本(CSS)到单独的文件 安装 npm install extract-text-webpack-plugin ...

  8. 魅族首页导航效果(不兼容IE)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. MATLAB入门学习（七）

    开始,线性代数和微积分了,不怕.不怕. 背命令就行了... 线性代数 解线性方程组: Ax=b A是系数矩阵,x未知数,b是列向量 如果有唯一解,直接x=b\A 第二 B=null(A,'r')求Ax ...

  10. ZOJ-3286 Very Simple Counting---因子数打表

    题目链接: https://cn.vjudge.net/problem/ZOJ-3286 题目大意: f(n)为n的因子个数 求出有多少个f(i)使得f(i) == f(n) && i ...