플렉스구조에서 이미지를 오버해서 배치할때 flex-shrink: 0;

디자인으로 봤을때 

전체 1280px 크기보다 오버해서 이미지를 배치해줬다. 

 

 

 

 

 

 

먼저 텍스트와 이미지를 플랙스 구조로 좌우 정렬해준다   display: flex;

 

---

 그리고 텍스트 부분과 이미지를 비율에 맞춰 배치 시켜준다. 

 

텍스트   /* 1280:550=100:x 42.96*/

/* 1280px 전체 크기에서 909이미지 만큼 튀어나가게  */

이미지  /* 1280:909 = 100:X *  71.01 %/

 

---

그럼 부모의 inner 안으로 들어가는데

원래 디자인 시안처럼 밖으로 나갈수 있도록 조정해보자

 

 

 

 

기존 플랙스 구조에서 쉬링크가 자동적용되므로 쉬링크를 꺼주자

쉬링크 꺼주기   flex-shrink: 0;

 

 

 

 

 

그럼 밖으로 튀어 나가는것 확인

---

하지만 줄어들면 다시 이미지가 짤리지 않고 나와야하기때문에 

1650px분기점을 한번 더 지정해서 넣어준다.

 

@media (max-width:1650px) {

  /* 텍스트가 43% 여서 이미지는 57%여야 안쪽에 딱 들어간다. */

  .main_intro .intro .img_wrap {

    width: 57%;

  }

---

굉장히 까다로운 디자인!