iPhone에서 이미지가 세로로 병이되었습니다.

bootstrap을 사용하여 웹 페이지 제작에서 일어난 사건

초보자이므로 이유를 모르고 고생했기 때문에 메모

bootstrap의 그리드 시스템 첫 도전으로 편한 ーー라고 생각하면 비참한 눈에 맞았습니다

아래 코드

<div class="container">
 <div class="row justify-content-center">
  <h3 class="col-11">人脈を可視化</h3>
  <img class="col-11 img-fluid" src="./縦のび画像.png">
 </div>
</div>

chrome의 개발자 도구로 iPhone 크기를 확인하고 제대로 표시되어 있었기 때문에 문제 없다고 생각하고, 막상 검증용 서버에 올려 iPhone에서 확인하면,,

어라! ! ? ? ? . 성장하고 있니? ?



야바 납기! !

여러가지 조사해 보면,,,

iPhone 특유의 Flexbox의 결함이라고 한다. 부모 요소를 max-height, min-height, auto , 퍼센티지 등만으로 설정했을 경우, 자식 요소의 높이가 인식되지 않는 경우가 있다고 한다. 이번에도 bootstrap 사용하고 있기 때문에 같은 결함 싶다.

거기서 row의 아이 요소에 img col 가져오지 않고, 일단 div로 col 사이에서 img로 해 보면,

<div class="container">
 <div class="row justify-content-center">
  <h3 class="col-11">人脈を可視化</h3>
  <div class="col-11">
   <img src="./縦のび画像.png" class="img-fluid">
  </div>
 </div>
</div>

잘 표시되었습니다! !



row의 아이에게 img col이 아니라 아이에게 div col, 손자에게 img로 해야 한다는 것입니다.

초보자 여러분은 조심합시다.

참고