容器内响应式图片

<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>