1.                     <img src="../images/bg1.jpg" alt="" />
  1.        img {
  2.             /*等宽缩小不变形*/
  3.             /*width: 100%;*/
  4.             /*二选一*/
  5.             /*等高缩小不变形*/
  6.             height: 100%;
  7.         }

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. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  2. OGC 的 WMS、WFS 及WCS服务(转)

    OGC——Open Geospatial Consortium——开放地理信息联盟,是一个非盈利的志愿的国际标准化组织,引领着空间地理信息标准及定位基本服务的发展目前在空间数据互操作领域,基于公共接口 ...

  3. Jave 之方法-函数（5）

    如何定义Java中的方法: 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. (方法在C语言中被称为函数) 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法允许被访问 ...

  4. Raspberry 安装vstudio

    Visual Studio Code微软公司推出的一款轻量级的Visual Studio风格的跨平台的IDE.当然,除了Windows,OSX,还能在树莓派上使用.目前树莓派上可用的IDE真不多,VS ...

  5. C语言函数指针（指向函数的指针）

    转载:http://c.biancheng.net/cpp/html/3248.html 一个函数总是占用一段连续的内存区域,函数名在表达式中有时也会被转换为该函数所在内存区域的首地址,这和数组名非常 ...

  6. C#启动外部程序（进程）

    通过调用Process类可以启动系统内部(环境变量里的)或者指定位置的程序,例如: Process.Start("notepad");//启动记事本 Process.Start(& ...

  7. 【Leetcode】【Medium】Binary Tree Right Side View

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  8. Wifi密码破解

    Wifi密码破解1:通过字典(暴力)破解WIFI密码   简单破解WEP/WPA/WPA2加密的WIFI密码,平台kali-linux 工具:Aircrack-ng 过程很简单:先抓含有正确密码的握手 ...

  9. c++ 读取文本问题

    c++文本操作有以下三个方法 ifstream,ofstream,fstream 读取文本常用的方法如下 std::ifstream input; input.open(".log" ...

  10. redis在windows平台安装和启动

    官网: https://redis.io/ 中文网站:http://www.redis.net.cn/ 一.下载windows版本的redis 官网没有提供windows版本的下载,只有linux版本 ...