初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果。

这里提供一种纯CSS的图片缩放功能,请看代码:

<style type="text/css">
.auto-width {MARGIN: auto;WIDTH: 100px;}
.auto-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 100 ? "100px" : this.width)!important;}
</style> <div class="auto-width">
<img src="_img/test.png" />
</div>

CSS实现图片快速等比例缩放,效果佳的更多相关文章

  1. js实现图片的等比例缩放

      js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...

  2. CSS 背景图片的定位和缩放

    在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...

  3. android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  4. Qt图片按原比例缩放

    1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...

  5. java读取jpg图片旋转按比例缩放

    //入口 public static BufferedImage constructHeatWheelView(int pageWidth, int pageHeight, DoubleHolder ...

  6. CSS图片Img等比例缩放且居中显示

    常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...

  7. js 完成对图片的等比例缩放的方法

    /* 重新按比例设置 页面上对应图片的长和高, */ function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { var wid ...

  8. CSS实现宽高成比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢.         html代 ...

  9. PHP对图片按照一定比例缩放并生成图片文件

    list($width, $height)=getimagesize($filename);//缩放比例$per=round(400/$width,3); $n_w=$width*$per;$n_h= ...

随机推荐

  1. ADO

    目 录 第1章 基础    1 1.1 引入ADO库文件    1 1.1.1 版本    1 1.2 初始化OLE/COM库环境    2 1.3 comdef.h    2 1.3.1 字符串编码 ...

  2. 微信小程序初体验(上)

    版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...

  3. 例题:输入您的出生日期,判断你的星座,主要练习使用datetime类及if else语句。很实用

    while (true) { Console.WriteLine("请输入您的生日(年-月-日)");//提示输入 string x = Console.ReadLine();// ...

  4. 【bzoj1052】覆盖问题

    [bzoj1052]覆盖问题 分析 考虑二分\(L\)的值,然后判断3个\(L*L\)能否覆盖所有的点. 这时候出现了两种可能的思路. 思路1 首先,3是一个很小的常数. 我们想:假如能探究出1和2的 ...

  5. 设置pictureBox的边框颜色

    private void pictureBox2_Paint(object sender, PaintEventArgs e) { PictureBox p = (PictureBox)sender; ...

  6. 8个实用的页面布局和用户界面jQuery插件

    网页设计师和网页开发人员在做项目的时候可能会有一些页面的布局或者对于UI有一些特定的要求.可能一些需求不能单独使用CSS就能实现的.于是很多时候开发人员都会消耗大量的时间和精力去写一些JS来协助实现. ...

  7. 《Java程序设计》学期总结

    <Java程序设计> 学期总结 课程设计小组 -迦瓦栈队 团队博客 读书笔记汇总 第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 第九周 第十周 实验报告汇总 实验一 实验 ...

  8. 加载图片、倒计时--Columbia项目总结

    CSS3 居然会在隐藏显示的时候触发,真心太神奇了(在ff下是没有用的,在chrome下才阔以) 貌似我还是写了大循环,怎么样才能优化这个循环呢 加载图片:已经用到过好多次了↓ function lo ...

  9. 爬虫基础学习 转【http://www.cnblogs.com/huangxincheng/archive/2012/11/08/2759752.html】

    这一篇我们聊聊在页面抓取时应该注意到的几个问题. 一:网页更新 我们知道,一般网页中的信息是不断翻新的,这也要求我们定期的去抓这些新信息,但是这个“定期”该怎么理解,也就是多长时间需要 抓一次该页面, ...

  10. Qt之可重入与线程安全

    简述 本篇文章中,术语"可重入性"和"线程安全"被用来标记类与函数,以表明它们如何被应用在多线程应用程序中. 一个线程安全的函数可以同时被多个线程调用,甚至调用 ...