精华内容
下载资源
问答
  • 图片等比例缩小

    千次阅读 2018-08-29 16:50:41
    目前项目中有个需求是将同一张图片显示在不同的页面上,但是因为页面给予的容器大小不一,这就需要将图片等比例缩小。最近学到了两个个能将图片等比例缩小的属性,个人感觉用起来非常方便。如下:   <!...

              目前项目中有个需求是将同一张图片显示在不同的页面上,但是因为页面给予的容器大小不一,这就需要将图片等比例缩小。最近学到了两个个能将图片等比例缩小的属性,个人感觉用起来非常方便。如下:

        

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img缩放</title>
        <style>
            .yuan {
                width: 100%;
                height: 100%;
                border: 1px solid red;
            }
    
            .suo > img {
                border: 1px solid gray;
                width: auto;
                height: auto;
                max-width: 10%;
                max-height: 10%;
            }
        </style>
    </head>
    <body>
    <div class="yuan">
        <img src="./../images/404.jpg">
    </div>
    <div class="suo">
        <img src="./../images/404.jpg">
    </div>
    </body>
    </html>
    展开全文
  • 为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。 又考虑到html页面解析顺序可能导致的...
  • 下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ,具体代码如下所示:img {/*等宽缩小不变形*//*width: 100%;*//*二选一*//*等高缩小不变形*/height: 100%;}补充:CSS控制图片大小不变形1.(不错,我正在用)img ...

    下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ,具体代码如下所示:

    img {

    /*等宽缩小不变形*/

    /*width: 100%;*/

    /*二选一*/

    /*等高缩小不变形*/

    height: 100%;

    }

    补充:CSS控制图片大小不变形

    1.(不错,我正在用)

    img {max-width:630px;myimg:expression_r(οnlοad=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

    设置最大宽度是630px 如果大于630就把图片宽度设置为630 高度就会随着比例也会缩小 不会造成图片变形

    2.

    img,a img{

    border:0;

    margin:0;

    padding:0;

    max-width:590px;

    width:e­xpression(this.width>590?"590px":this.width);

    max-height:590px;

    height:e­xpression(this.height>590?"590px":this.height);

    }

    3.

    div img {

    max-width:600px;

    width:600px;

    width:expression(document.body.clientWidth>600?”600px”:”auto”);

    overflow:hidden;

    }

    max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

    width:600px; 在所有浏览器中图片的大小为600px;

    当图片大小大于600px,自动缩小为600px。在IE6中有效。

    overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

    4.

    如果想设定图片的高度和宽度都不超过某一个固定值,就需要在图片高度或宽度超过这个值的时候,让图片按比例缩小到这个尺寸。

    1,对于现代浏览器,比如Firefox或是IE7及以上,直接使用max-width和max-height两条CSS属性即可。

    2,对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

    functionresizeImage(obj){

    obj.width=obj.width>50&&obj.width>obj.height?50:auto;

    obj.height=obj.height>50?50:auto;

    }

    总结

    以上所述是小编给大家介绍的CSS实现图片等比例缩小不变形的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • 为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。 又考虑到html页面解析顺序可能导致的...

    为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。

    而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。

    又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下:

    JS部分

     1 <script type="text/javascript">
     2 function changeImg(objImg)
     3 {
     4     var most = 690;        //设置最大宽度
     5     if(objImg.width > most)
     6     {
     7         var scaling = 1-(objImg.width-most)/objImg.width;    
     8         //计算缩小比例
     9         objImg.width = objImg.width*scaling;
    10         objImg.height = objImg.height;            //img元素没有设置高度时将自动等比例缩小
    11         
    12         //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
    13     }
    14     
    15 }
    16 </script>

    HTML调用部分

    1 <img src="" onload="changeImg(this);" />

    各位献丑了...

    展开全文
  • 为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。 又考虑到html页面解析顺序可能导致的...
    为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求。

    而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。

    又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下:

    JS部分:

    <script type="text/javascript">
     2 function changeImg(objImg)
     3 {
     4     var most = 690;                //设置最大宽度
     5     if(objImg.width > most)
     6     {
     7         var scaling = 1-(objImg.width-most)/most;    //计算缩放比例
     8         objImg.width = objImg.width*scaling;
     9         objImg.height = objImg.height*scaling;
    10     }
    11    
    12 }
    13 </script>

    HTML调用部分:

    <img src="" onload="changeImg(this);" />

    展开全文
  • html代码结构:样式:a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 这里需要指定a标签的高宽,背景和边框为可选 */脚本(jquery可自行添加):$(function () {var imgs = ...
  • 网上说了一大堆,说什么设置p的宽度... } /* 分享页面图片自动缩放设备屏幕宽度 */ img.sharepage{ max-width:100%; } 本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉 本文系统来源:php中文网
  • /*** ...图片大于浏览器时下窗口可视区域时,进行等比例缩小。 * src 图片路径。必须项 * imgHeight 图片显示高度,默认原大小展示。图片大于浏览器时下窗口可视区域时,进行等比例缩小。 * imgW...
  • layui等比例放大/缩小图片

    千次阅读 2019-09-18 06:52:03
    HTML <img class="layui-upload-img" id="photo" style="max-height: 100px;max-width: 100px;"> JS $("#photo").click(function(){ showImg($(this)); }); function showImg(imgData){ var ...
  • ImageView等比例缩小

    2015-11-20 15:49:08
    android:scaleType可控制图片的缩放方式,示例代码如下: [html] view plaincopyprint? ImageView android:id="@+id/img"   android:src="@drawable/logo"   android:scaleType=...
  • 之前看到好多人问一个问题:怎么图片等比例放大或缩小超过屏幕大小,主要是后面超过屏幕大小,我一直没看到有人回答,这个功能比较常见,所以我把这个方法共享出来,只是写了核心重要代码,如果谁测试了,请把demo...
  • 有很多人问到,在网站应用中,由于图片是后台增加的,图片的宽度和高度大小都不一致,如何使图片在前台显示的大小都保持一至,且不能变形(就像windows图片文件夹里的缩略图一样)。对于这个问题,下面有两种很简单...
  • &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="...text/html;...最新javascript自动按比例显示图片,按比例压缩图片显示&lt;/ti
  • DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
  • 但是这涉及到一个等比例的问题。否则图片会被压缩或者拉伸。所以可以只设置img标签的宽度或者高度一项 就可以了。这样img会自动帮助我们设置另外一项的大小,实现等比例缩放,十分方便。 比如: &lt;img src=&...
  • 图片放大缩小demo ①文件路径 ②enlarge.html <!DOCTYPE html> <script src="jquery/jquery-3.4.1.min.js"></script> <script src="../0903/enlarge.js"></script> <html ...
  • 演示地址:http://corange.cn/demo/3670/index.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
  • 方法1img 只定义宽(或高)度可以等比例缩放,外面加个框,设置宽高和 ...background-position: center centertips:使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽...
  • 有时候自己为了控制图片的响应式,按比例缩小放大图片,如果解决这个问题,用js吧,很麻烦、也会损失很大的加载运行速度;所以我们还是用css来解决这个问题,用css来强制按比例压缩图片的高度或宽度,看代码不说话...
  • css自适应控制图片宽度对...给图片的img标签设置width或者height的任意一个,图片会自动等比例缩放。我们可以设置这两个属性值小于原图片大小使图片缩小。示例:.div1 {width:300px ;height:200px;border:solid 1p...
  • &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type"...text/html;...拖拽,按等比例放大,缩小,任意修改图片大小&lt;/title&gt; &lt;meta name="Ke
  • 我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考。按比例缩小或者放大到某个尺寸,对于标准浏览器(如Fire...

空空如也

空空如也

1 2 3 4
收藏数 75
精华内容 30
关键字:

html图片等比例缩小