# 모바일 기기에서 이미지가 너비에 맞게 조정되지 않음

**URL:** https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921
**Category:** Support
**Created:** [2월 3, 2022, 2:10오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921 "2022-02-03T02:10:10Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![chulapo](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@chulapo](https://meta.discourse.org/u/chulapo)
#### Post date: [2월 3, 2022, 2:10오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/1 "2022-02-03T02:10:10Z")

</div>

안녕하세요, 며칠 전 업데이트 이후 반응형 이미지 관련 변경 사항이 있습니다.  
이제 가로형 이미지가 페이지 너비에 맞춰 조정되지 않아, 전체 이미지를 보려면 이미지를 클릭해야 합니다. 다만, 이 버그(?)는 데스크톱 버전에서는 발생하지 않습니다.

해당 문제의 예를 보여드리겠습니다:

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/4/94818ec2009b5de5a83a37c29c288ddc403f7b45.jpeg)

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/0/602d8f50587f29197b367fd686fcf00ee8a69d71.jpeg)

설정 사항은 변경하지 않았으므로, 이는 최근 업데이트 중 일부로 인한 것 같습니다. 의도적으로 변경된 사항인가요? 이미지 미리보기가 항상 페이지 너비에 맞춰 조정되도록 설정을 변경할 방법이 있을까요?

감사합니다!

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 4, 2022, 7:16오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/2 "2022-02-04T07:16:21Z")

</div>

[이 커밋](https://github.com/discourse/discourse/commit/eff0106efbf1cec02d46a13460fcd686591e64d8)에서 변경되었습니다.

원하시면 되돌릴 수 있습니다. css에 다음 내용을 추가하세요.

```scss
.cooked,
.d-editor-preview {
  img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
    height: auto;
  }
}

```

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2월 4, 2022, 8:25오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/3 "2022-02-04T08:25:39Z")

</div>

그러니까 모바일에서 라이트박스를 통해 전체 이미지를 보려면 거의 모든 이미지를 클릭해야 한다는 변경이 의도된 것이었나요?  
.

 ![_20220204_092221](https://global.discourse-cdn.com/meta/original/3X/7/b/7bfaa9c35b95d56d39b6163e27f5906b2a42eea0.jpeg)  
보이는 것보다 더 많은 내용이 있다는 것을 추측하고, 확인하려면 라이트박스가 필요하다는 뜻인가요?  
 ![_20220204_092257](https://global.discourse-cdn.com/meta/original/3X/1/e/1ed01a5690c4639f8813b90b220f5eef9fefd8c2.jpeg)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 4, 2022, 8:31오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/4 "2022-02-04T08:31:35Z")

</div>

네, 방금 이 부분을 자세히 확인해 보았는데, 라이트박스 미디어가 없는 경우 문제를 일으킬 수 있는 것 같습니다. 예를 들어 GIF의 경우, 클릭 시 동작이 일시 정지(pause)이기 때문입니다.

 ![Screenshot_20220204_092750_com.android.chrome](https://global.discourse-cdn.com/meta/original/3X/8/2/827fefd50e86d882a45ed030bb4366edf6b2b1aa.jpeg)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2월 4, 2022, 8:39오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/5 "2022-02-04T08:39:26Z")

</div>

저한테는 GIF가 왜곡되어 보입니다

 ![_20220204_093652](https://global.discourse-cdn.com/meta/original/3X/b/0/b06bf5915fdddc49cf406ab0aeea3b497a07c543.jpeg)  
모든 정보는 다 있는데, 사람들이 꽤 가늘게 보입니다

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 4, 2022, 8:41오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/6 "2022-02-04T08:41:45Z")

</div>

> [@Moin](#):
>
> 사람들이 꽤 마른 것 같네요

네, 제가 말한 게 바로 그거예요 😄

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2월 4, 2022, 9:17오전 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/7 "2022-02-04T09:17:32Z")

</div>

리포트 감사합니다. 저도 재현할 수 있으며, 수정 방법을 검토하겠습니다.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2월 4, 2022, 2:32오후 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/10 "2022-02-04T14:32:57Z")

</div>

> [@Moin](#):
>
> 즉, 보이는 것보다 더 많은 것이 있다는 걸 추측해야 한다는 뜻입니다.

우리 커뮤니티는 사진 중심이라 이건 우리에게 꽤나 재앙적인 상황입니다.

데스크톱:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/1/619a32f3eb5a7fe2dda6561ff1ef55e0286ab83e.jpeg)

모바일에서 보이는 모습:

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/8/c8708ea3326e717fa9feb18b1d517256f6179761.jpeg)

@Don 님, CSS 감사합니다. 임시 해결책으로 적용해 볼 수 있을 것 같아요 🙂

그리고 @pmusaraj 님, 이슈에 바로 대응해 주셔서 감사합니다 🙂

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2월 4, 2022, 2:53오후 UTC](https://meta.discourse.org/t/images-not-adjusting-to-the-width-on-mobile-devices/216921/11 "2022-02-04T14:53:47Z")

</div>

모두 감사합니다. 위에서 Don이 링크한 커밋을 되돌렸으니, 곧 `tests-passed` 브랜치에서 수정될 것입니다.
