容器内响应式图片

<style>
  .container {
    width: 100px;
  }
</style>
<div class="container">
  <img src="https://avatars.githubusercontent.com/u/61053131" alt="" />
</div>
<script>
  const img = document.querySelector('img')

  img.addEventListener('load', (e) => {
    const img = e.target
    const parent = img.parentElement
    const scale = parent.clientWidth / parent.clientHeight

    if (img.complete) {
      if (img.naturalWidth > img.naturalHeight * scale) {
        img.style.width = '100%'
        img.style.height = 'auto'
      } else {
        img.style.width = 'auto'
        img.style.height = '100%'
      }
    }
  })
</script>