TIL - 2022.05.29(원티드 프리온보딩)

이미지를 div테그 안에 넣을때 div테그안을 가득 채우고 싶을때

• 비율이 깨지지 않고 이미지의 가운데 부분이 보이고 넘치는 부분은 자른다.

<div class="imageContainer">
	<img class="image">
</div>

.imageContainer {
   width:400px;
   height:200px;
   overflow:hidden;
   margin:0 auto;
}

.image {
   width:100%;
   height:100%;
   object-fit:cover;
}

• overflow:hidden 을 주어 이미지 태그가 해당 사이즈를 벗어나면 잘림

• 이미지 태그는 원본 비율을 유지 width: 100%, height: 100% 상위 div 크기에 딱 맞아 들어가도록 object-fit: cover; 를 부여한다.

React-Slick으로 typescript를 이용하기 위한 Carousel 설치

npm install react-slick @types/react-slick slick-carousel --save

import Slider from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
}

return 	
	<div>
      	<Slider {...settings}>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
        </Slider>
	</div>