cover裁切的图片如何在上面准却定位?

161 阅读1分钟

计算图片比例 动态给上面一层定位的盒子设置宽高

        // 图片比例
var calcPostion = function() {
  var radio = 1920 / 752
  var $img = $('#cti_module_highlights_design .swiper-slide')
  var $spotbox = $('#cti_module_highlights_design .spot-box')
  var curRadio = $img.width() / $img.height()
  if (curRadio > radio) {
    // console.log('宽度大')
    $spotbox.css({
      width: $img.width() + 'px',
      height: $img.width() / radio + 'px',
      top: '50%',
      left: '0',
      transform: 'translateY(-50%)'
    })
  } else {
    // console.log('高度大')
    $spotbox.css({
      height: $img.height() + 'px',
      width: $img.height() * radio + 'px',
      left: '50%',
      top: '0',
      transform: 'translateX(-50%)'
    })
  }
}
calcPostion()