이미지 자르기 overflow

장돌뱅이 ·2022년 2월 24일
0

CSS

목록 보기
17/18

특정 너비와 높이의 div 안에 이미지를 넣은 후
div의 overflow: hidden으로 설정해야 overflow가 활성화 된다.

혹은

img 태그에object-fit:cover를 적용하고 width: 100%, height: 100%를 적용해줄 경우
div의 범위를 벗어날 경우 이미지를 자르더라도 이미지를 확대해 컨테이너를 완전히 채운다.

.third-box .author {
  position: relative;
  width: 130px;
  height: 170px;
}

.third-box img {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;

}

0개의 댓글