기본 너비가 최대 화면 크기보다 작은 이미지에 대한 반응 기본의 width = '100 %'

mheavers

나는 iphone 7 @ 2x (750px 너비) 용으로 만든 이미지로 width = '100 %'를 사용하여 네이티브 v.42에 반응하고 있습니다. 이것은 iphone 7에서 제대로 작동하지만 7plus에서 이미지를 보면 상단과 하단이 잘립니다. 이를 방지하기 위해 7plus (818px @ 2x)의 이미지를 저장해야합니다.

누구든지 width = '100 %'를 사용하는 방법을 알고 있고 비율에 따라 최대 기본 크기를 초과하는 이미지 배율을 가지고 있습니까? 크기 조정 모드 변경이 작동하지 않습니다. 또한 내가 도울 수 있다면 어떤 플러그인도 사용하고 싶지 않습니다.

창 치수에 따라 높이와 너비를 명시 적으로 정의 할 수 있다는 것을 알고 있습니다.

    import { Dimensions } from 'react-native'

    const { height, width } = Dimensions.get('window')

    export {
      height as deviceHeight,
      width as deviceWidth,

}

높이에 대한 비율 계산을 사용하지만 높이에 대한 치수를 선언 할 필요가없는 방법을 찾고 있습니다 (본질적으로 a height: auto).

존 러델

시도해 볼 수있는 몇 가지가 있습니다.

화면을 가리도록 이미지를 말해보세요.

resizeMode: 'cover'

이것은 모두 flexbox 레이아웃이기 때문에 align-self를 사용하여 자식에게 늘 이도록 지시 할 수 있습니다.

alignSelf: 'stretch'

둘 다 작동하지 않는 경우 .. 이전에 수행 한 또 다른 대안은 정적 크기를 제거하여 자연스럽게 커지도록하는 것입니다 (너비 및 높이에 대해 null 지정).

width: null,
height: null

지원에 대한 Facebook 문서

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

모달 대화 상자의 너비를 고정하지만 화면 크기가 그보다 작게 조정되면 반응 형으로 크기를 조정해야합니다.

분류에서Dev

최대 너비로 이미지 크기 조정 중지 : 100 %

분류에서Dev

강화 학습의 가치 반복에 대한 기본 사례

분류에서Dev

WPF Borderless 창은 기본 화면 크기로만 최대화됩니다.

분류에서Dev

반응 - 기본 '돌아 오는 catch되지 않은 오류 : 작업은 일반 개체를해야합니다. 버튼을 눌러에 비동기 작업 '에 대한 사용 사용자 정의 미들웨어

분류에서Dev

어떻게 기본 반응에 대한 multidex 가능합니까?

분류에서Dev

QTreeView 위젯 기본 크기는 최대 화면 공간을 차지합니다.

분류에서Dev

QTreeView 위젯 기본 크기는 최대 화면 공간을 차지합니다.

분류에서Dev

기본 네비게이터가 아닌 화면에 대한 경로 추가

분류에서Dev

다양한 화면 크기에 대한 기본 글꼴 크기에 상대적인 글꼴 크기 설정

분류에서Dev

다양한 장치에 대한 모바일 반응 형의 정확한 배너 이미지 크기

분류에서Dev

최대 너비 100px 대 너비 100px, 왜 최대 너비가 너비보다 짧은가요?

분류에서Dev

이미지 div가 더 작은 화면 크기로 반응하지 않습니다.

분류에서Dev

기본 설정 화면에서 조각의 ID에 대한보기를 찾을 수 없습니다.

분류에서Dev

최대 너비가 설정된 div에 맞게 이미지 크기 조정

분류에서Dev

CakePHP의 사용자 그룹에 대한 기본 작업 기반 변경

분류에서Dev

웹 사이트의 다양한 화면 너비에 가장 적합한 표준 이미지 크기

분류에서Dev

내 png 이미지와 텍스트 컨테이너가 다른 크기의 화면에 반응하도록 만드는 방법은 무엇입니까?

분류에서Dev

이미지가 화면 크기에 따라 확대되지 않는 것처럼 보입니다.

분류에서Dev

배열에 대한 C ++ 기본 동작-얕은 복사본?

분류에서Dev

뷰를 오버레이해도 기본 뷰에 대한 작업이 비활성화되지 않습니다.

분류에서Dev

작은 이미지가 기본 이미지보다 큰 크기로 ImageView에서 늘어납니다.

분류에서Dev

높은 기본 기능에 대한 ANOVA

분류에서Dev

기본 R의 요인에 대한 최대 값 선택

분류에서Dev

반응 구성 요소에 대한 기본 소품 설정

분류에서Dev

Windows 8의 기본 화면이 아닌 두 번째 화면의 작업 표시 줄에 대해 자동 숨기기를 설정합니다.

분류에서Dev

기본 키, 최대 제한

분류에서Dev

미디어 쿼리로 다른 화면 크기에 대한 이미지로드

분류에서Dev

ms-word 추가 기능에 대한 작업 창의 기본 크기를 늘릴 수 있습니까?

Related 관련 기사

  1. 1

    모달 대화 상자의 너비를 고정하지만 화면 크기가 그보다 작게 조정되면 반응 형으로 크기를 조정해야합니다.

  2. 2

    최대 너비로 이미지 크기 조정 중지 : 100 %

  3. 3

    강화 학습의 가치 반복에 대한 기본 사례

  4. 4

    WPF Borderless 창은 기본 화면 크기로만 최대화됩니다.

  5. 5

    반응 - 기본 '돌아 오는 catch되지 않은 오류 : 작업은 일반 개체를해야합니다. 버튼을 눌러에 비동기 작업 '에 대한 사용 사용자 정의 미들웨어

  6. 6

    어떻게 기본 반응에 대한 multidex 가능합니까?

  7. 7

    QTreeView 위젯 기본 크기는 최대 화면 공간을 차지합니다.

  8. 8

    QTreeView 위젯 기본 크기는 최대 화면 공간을 차지합니다.

  9. 9

    기본 네비게이터가 아닌 화면에 대한 경로 추가

  10. 10

    다양한 화면 크기에 대한 기본 글꼴 크기에 상대적인 글꼴 크기 설정

  11. 11

    다양한 장치에 대한 모바일 반응 형의 정확한 배너 이미지 크기

  12. 12

    최대 너비 100px 대 너비 100px, 왜 최대 너비가 너비보다 짧은가요?

  13. 13

    이미지 div가 더 작은 화면 크기로 반응하지 않습니다.

  14. 14

    기본 설정 화면에서 조각의 ID에 대한보기를 찾을 수 없습니다.

  15. 15

    최대 너비가 설정된 div에 맞게 이미지 크기 조정

  16. 16

    CakePHP의 사용자 그룹에 대한 기본 작업 기반 변경

  17. 17

    웹 사이트의 다양한 화면 너비에 가장 적합한 표준 이미지 크기

  18. 18

    내 png 이미지와 텍스트 컨테이너가 다른 크기의 화면에 반응하도록 만드는 방법은 무엇입니까?

  19. 19

    이미지가 화면 크기에 따라 확대되지 않는 것처럼 보입니다.

  20. 20

    배열에 대한 C ++ 기본 동작-얕은 복사본?

  21. 21

    뷰를 오버레이해도 기본 뷰에 대한 작업이 비활성화되지 않습니다.

  22. 22

    작은 이미지가 기본 이미지보다 큰 크기로 ImageView에서 늘어납니다.

  23. 23

    높은 기본 기능에 대한 ANOVA

  24. 24

    기본 R의 요인에 대한 최대 값 선택

  25. 25

    반응 구성 요소에 대한 기본 소품 설정

  26. 26

    Windows 8의 기본 화면이 아닌 두 번째 화면의 작업 표시 줄에 대해 자동 숨기기를 설정합니다.

  27. 27

    기본 키, 최대 제한

  28. 28

    미디어 쿼리로 다른 화면 크기에 대한 이미지로드

  29. 29

    ms-word 추가 기능에 대한 작업 창의 기본 크기를 늘릴 수 있습니까?

뜨겁다태그

보관