관리 메뉴

웹개발자의 기지개

[CSS] 사진 이미지 가로,세로 비율 적절히 중앙에 꽉채우기 본문

웹퍼블리싱/CSS

[CSS] 사진 이미지 가로,세로 비율 적절히 중앙에 꽉채우기

웹개발자 워니 2025. 11. 6. 17:54

 

<img src="이미지" alt="" class="zoom11" style="object-fit: cover;object-position: center;">

 

/* 비율 유지하며 꽉 채우기 */

/* 중앙 기준으로 잘라내기 */

 

 

 

.background-image {
  background-image: url('your-image.jpg');
  background-size: cover; /* 세로가 긴 이미지를 부모 요소에 꽉 채움 */
  background-position: center; /* 이미지를 가운데에 위치 */
}

 

 

.background-image {
  background-image: url('your-image.jpg');
  background-size: contain; /* 이미지가 잘리지 않고 모두 보이도록 함 */
  background-position: center; /* 이미지를 가운데에 위치 */
}

 

 

 

 

 

 

 

 

 

Comments