图片等比缩放

原始需求

dom

<div styleName="content">
    <div styleName="banner" style={bannerCheckboxStyle(w, h)}>
      <img src='/imgeXXXX' />
    </div>
  </div>

css

.content{ // 给定一个容器，让图片在这个容器内等比缩放
 width: 256px;
 height: 256px;
}
.banner {
position: relative;
width: 62.5%;
margin: auto;
padding-top: 100%;
}

.banner > img {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}

js

/**
*  w:原始宽度   
*  h:原始高度
/
 const bannerCheckboxStyle = (w: number, h: number) => {
   let style = { width: '62.5%', paddingTop: '100%' }
   const aspect_ratio = `${(w / h) * 100}%`
   if (w <= h) {
     style.width = aspect_ratio
     style.paddingTop = `100%`
   } else {
     style.width = `100%`
     style.paddingTop = aspect_ratio
   }
   return style
 }