티스토리에서 커버 부분 변경 직사각형 썸네일을 정사각형 썸네일로 변경하는 html/css 코딩~

안녕하세요! 티스토리 커버 기능을 많이 사용하고 계실텐데요. 티스토리 커버 기능의 썸네일이 직사각형을 정사각형(1:1)으로 바꾸고 싶을 때 사용할 수 있는 HTML/CSS 코딩은 다음과 같습니다. 티스토리 커버 썸네일 부분변경 코드는 다음과 같습니다. 

---

 

HTML:
<div class="thumbnail-container">
  <img src="thumbnail.jpg" alt="썸네일 이미지">
</div>

 

 

CSS:
.thumbnail-container {
  width: 100%; /* 썸네일 컨테이너의 너비를 100%로 설정 */
  max-width: 300px; /* 썸네일 컨테이너의 최대 너비를 300px로 설정 */
  padding-top: 100%; /* 썸네일 컨테이너의 높이를 100%로 설정 */
  position: relative; /* 상대 위치 속성 설정 */
  overflow: hidden; /* 내용이 넘치는 경우 가려진 부분을 숨김 */
}

.thumbnail-container img {
  position: absolute; /* 절대 위치 속성 설정 */
  top: 0; /* 상단 위치를 0으로 설정 */
  left: 0; /* 왼쪽 위치를 0으로 설정 */
  right: 0; /* 오른쪽 위치를 0으로 설정 */
  bottom: 0; /* 하단 위치를 0으로 설정 */
  width: 100%; /* 이미지의 너비를 100%로 설정 */
  height: 100%; /* 이미지의 높이를 100%로 설정 */
  object-fit: cover; /* 이미지가 썸네일 컨테이너에 꽉 차도록 설정 */
}

 

---

[주석]

위 코드에서는 .thumbnail-container라는 클래스를 가진 div 요소를 생성하여 썸네일 이미지를 감싸고, 해당 div 요소의 너비와 높이를 100%로 설정하여 정사각형으로 만듭니다. 내부의 이미지 요소에는 object-fit: cover; 속성을 사용하여 이미지가 썸네일 컨테이너에 꽉 차도록 설정합니다. 이를 통해 썸네일 이미지를 정사각형으로 변경할 수 있습니다. 필요에 따라 .thumbnail-container 클래스와 내부 이미지 요소의 스타일을 수정하여 원하는 디자인을 구현할 수 있습니다.