<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. python（day1-11）

    day1:Python入门 day2:数字类型字符编码 day3:函数 day4:模块与包 day5:常用模块 day6:面向对象 day8:异常处理 day9:网络编程 day10:并发编程 day ...

  2. react-native-mapbox-gl

    mapbox是基于谷歌地图集成的地图插件,可以在很多平台使用,具体可以看mapbox官网.这里具体讲解“react-native-mapbox-gl”插件,是mapbox结合react native封 ...

  3. 在 IDEA 中 配置 Maven

    1.从 Maven官网下载 最新版的 Maven  2.设置Java相关环境变量 JAVA_HOME       AVA_HOME=C:\jdk1.5.0_06 PATH                ...

  4. 使用FMDB最新v2.3版本教程

    使用FMDB教程 本教程针对于第一次接触开源库FMDB的同胞,从如何下载源码如何导入工程如何创建数据库如何写增删改查开始.使用的时最新版本的FMDB v2.3. 此教程开始日期为 2014.5.5 P ...

  5. ldconfig: /usr/lib/libpython2.6.so.1.0-gdb.py is not an ELF file - it has the wrong magic bytes at the start.

    https://bugzilla.redhat.com/show_bug.cgi?id=562980

  6. Python学习---高阶函数的学习

    高阶函数 高阶函数:函数名可以作为参数传递输入,函数名还可以作为返回值返回 函数名可以重新赋值,因为其本身就是一个变量    函数本身就是一个对象,    函数的变量名f本身就是指向函数本身的,加上括 ...

  7. Fatal error: Call to undefined function fnmatch() 解决

    我的PHP版本是5.6.30,linux 是CentOS 6.6,nginx,也不知啥问题,看了官方: https://secure.php.net/manual/en/function.fnmatc ...

  8. 如何控制table中td内的文本位置

    默认为左中效果    td中垂直用valign 取值为:top/middle/bottom/baseline,水平用align 取值为:left,center,right;

  9. Ubuntu查看版本信息

    关于查看Ubuntu的版本信息,我们会用到两个命令uname和cat. uname命令 这个命令用于显示系统信息.其参数为: -a 显示所有系统信息.其中包括机器名.操作系统名.内核名称等. 以下为执 ...

  10. C++ 的编译过程

    Recall that g++ is not actually the C++ compiler – it is a driver program that hides a lot of the co ...