利用JS解决ie6不支持max-width,max-height问题的方法
May 16, 2016 pm 05:05 PM
ie6
本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法。需要的朋友可以过来参考下,希望对大家有所帮助。
今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如:
if($.browser.msie && $.browser.version == 6.0) { var maxWidth = parseInt($('.viewBigPic img').css('max-width')); $('.viewBigPic img').each(function(){ if ($(this).width() > maxWidth) $(this).width(maxWidth); }); }
Salin selepas log masuk
不知道是什么原因,获取不到css里面的最大值,然后只能用原生的js来实现
js代码如下:
<script type='text/javascript'> function setPhotoSize(elem, width, height) { <!--[if IE 6]> try{ var image=new Image(); image.src=elem.src; if(image.width>0 && image.height>0){ var rate = (width/image.width < height/image.height)? width/image.width : height/image.height; if(rate <= 1){ elem.width = image.width*rate; elem.height = image.height*rate; } else { elem.width = image.width; elem.height = image.height; } } }catch(e){} <!--[endif]--> } </script>
Salin selepas log masuk
部分的html代码如下:
<p class="viewBigBox"> <p class="viewBigPic"> <p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p> </p> </p>
Salin selepas log masuk
css样式如下:
.viewBigBox{ border:1px solid #e3e3e3; background-color:#ffffff; padding:1px; margin-top:18px;} .viewBigPic{ background-color:#f7f7f7;padding:20px 14px;} .viewBigPic p{display:table-cell;width:730px; line-height:470px; overflow:hidden; vertical-align:middle; text-align:center; height:470px;*font-size:390px;} //实现图片垂直居中,主要运用了font-size与height的比例 .viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}
Salin selepas log masuk
以上就是本章的全部内容,更多相关教程请访问JavaScript视频教程!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌

Alat panas Tag

Artikel Panas
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

Tutorial Persediaan API Carian Google Custom

8 plugin susun atur halaman jquery yang menakjubkan
