HTML with ChatGPT

#HTML Code Example

<div class="image-container">

  <img src="https://64.media.tumblr.com/61052b3646a4ab781f7b3fe7e34fd8aa/tumblr_n9ibfl3gis1smkwalo1_640.gifv" alt="움직이는 이미지" class="animated-gif">

</div>

<style>

  .image-container {

    width:400px; /* 이미지 컨테이너의 너비 조정 */

    height: 200px; /* 이미지 컨테이너의 높이 조정 */

  }

  .animated-gif {

    width: 100%; /* 이미지의 너비 조정 */

    height: 100%; /* 이미지의 높이 조정 */

    object-fit: cover; /* 이미지가 비율 유지하며 컨테이너를 가득 채우도록 설정 */

    object-position: center; /* 이미지를 컨테이너 중앙에 위치시키도록 설정 */

  }

</style>

※ gif 파일 코드 수정 결과 산출물