响应式中解决图片大小不一样，导致盒子高度不一样的问题
生活随笔
收集整理的這篇文章主要介紹了
响应式中解决图片大小不一样，导致盒子高度不一样的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
直接用比例的方式來做,拿到圖片寬除以圖片高得到比例并且配合onresize來動態計算就好了很簡單
var Lheight = $(".swiper-slide:nth-of-type(1)>.slide_header").outerWidth() / 0.9;$(".swiper-slide>.slide_header").css("height",Lheight);/*讓所有圖片展示的地方區域等高 */if($(window).width() + 17 <= 1400 && $(window).width() + 17 >= 996){var Lheight = $(".swiper-slide:nth-of-type(1)>.slide_header").outerWidth() / 1.2;$(".swiper-slide>.slide_header").css("height",Lheight);}else if($(window).width() + 17 <= 320){var Lheight = $(".swiper-slide:nth-of-type(1)>.slide_header").outerWidth() / 1.4;$(".swiper-slide>.slide_header").css("height",Lheight);}else{var Lheight = $(".swiper-slide:nth-of-type(1)>.slide_header").outerWidth() / 0.9;$(".swiper-slide>.slide_header").css("height",Lheight);}總結
以上是生活随笔為你收集整理的响应式中解决图片大小不一样，导致盒子高度不一样的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： azkaban使用--schedule定
- 下一篇： html中如何实现选择存储路径的功能_1