Carousel 직접만들기 1 강의에서 질문있습니다.

[윤준호]

    <h4 clas="my-4 text-center">ShowCase</h4>
    <div class="slide-container">
      <div class="slide-box">
        <img src="img/shoes.jpg">
      </div>
      <div class="slide-box">
        <img src="img/travel2.jpg">
      </div>
      <div class="slide-box">
        <img src="img/travel3.jpg">
      </div>
    </div>                                         

이렇게 이미지를 3개를 넣으셔서 아래 css로 화면에 맞게 조정을 하셨는데,

.slide-box{
    width: 100vw;      /*viewport width(실제 브라우저 화면)로부터 100%차지 */
    float : left;
}

.slide-container{
    width: 300vw;
}

.slide-box img{
    width: 100%;
}

 

첫 이미지는 큰 이미지라 조정이 되는데, 

2,3번째는 원래 크기가 작은 이미지인데 slide-box img에 width:100%를 해주었는데

계속 작은 상태입니다. 어떻게 해결해야 할까요?

[codingapple]

100%만 주면 부모박스에 꽉차야합니다 아마 다른 스타일이 간섭하고있는게 아닐까요 

[윤준호]

원래 이미지가 작던 크던 부모한테 100%로 찬다는 말씀이시죠?

ps. 새해복많이 받으세요 ㅎㅎ!

[codingapple]

그래야합니다 

[글쓴이]

글