用 JS 设置图片的最大宽度】的更多相关文章

//用 JS 设置图片的最大宽度    function setImgsMaxWidth() {        $('.answerimg img').each(function () {            $(this)[0].onload = function () {                var maxWidth = 1100; // 图片最大宽度                 var ratio = 0;  // 缩放比例                 var widt…
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" src="1.jpg">   <script type="text/javascript">     var img = document.getElementById("img");     console.log(img.i…
naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高. // 封装function getNaturalSize (DomElement) { var natureSize = {}; if(window.naturalWidth && window.naturalHeight) { natureSize.width = DomElement.naturalWidth; natureSi…
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ width:100%; height:100%; position: absolute; } 如果仅仅想要外层div同宽高,而图片保持原图大小不被撑大, 可以将图片属性换成下面这个 .img-box img{ max-width:100%; max-height:100%; margin: auto…
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 .news img{margin…
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 1.news img{margin:5px auto; display:block;width:100%; height:auto;}但是这种方式有另外一个问题就是,如果插入的图…
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1.给所有的图片加上这样的样式 .news img{margin:5px auto; display:block;width:100%; height:auto;} 但是这种方式有另外一个问题就是,如果插入的图片本…
JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height&g…
){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4pool = setInterval("show_prize_pool()",1500); //页面大小改变后,要再次计算奖池元素的高度. $(window).resize(function(){ show_prize_pool(); }); 简单说明下: 1.$('img.pool_li…
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg" id="test" width="250px"…