휴대폰에서 볼 때 웹 사이트에서 이미지를 회전시키는 방법)
작은 화면에서 이미지를 옆으로 돌리기
크리스토퍼 헹,thesitewizard.com
한 방문객이 휴대전화로 자신의 웹페이지를 볼 때 사진을 어떻게 회전시켜 수직으로 표시할 수 있는지 물었다. 즉,그는 그림이 바탕 화면이나 노트북 컴퓨터에,수평 이상 측면으로,그 평소에 표시 할 원하지만,휴대 전화에 회전,그래서더 긴면은 이제 수직이다.
서문
-
이 문서 컴퓨터 모니터 및 휴대 전화에 다르게 표시 하는 그림을 다루는. 당신은 단순히 그 위치에 항상 있도록 영구적으로 사진을 회전하려면그것을 보는 방법에 관계없이,당신은 단지 그것을 할 애니 매지 편집 을 사용해야합니다. 그것은 훨씬 더 간단 하 고 효율적인,그리고 그것은 당신이 얻을 때 발생 하는 문제를 피할 수 있습니다.
-
사진을 회전 하는 대신 휴대 전화 화면의 너비에 맞게 축소 하는 것입니다. 대부분의 웹 사이트는 그렇게 할. 원하는 경우 이미지를 모바일 친화적 인(반응 형 디자인)으로 만드는 방법을 읽으십시오. 또한 휴대 전화에서 볼 때 웹 사이트에서 이미지를 숨기는 방법을 보여주는 기사가 있습니다.
-
내 방문자에 의해 생성 된 2 열 레이아웃을 사용하는 웹 사이트를했다 모바일-우호적 인레이 아웃 마법사,하지만 당신은 또한 사용하여 설계된 웹 사이트에 아래에 설명 된 기술을 사용할 수 있습니다어떤 레이아웃,자체 생성 또는 다른 곳에서 얻은. 즉,이 방법은 사용할 수있는 일반적인 방법입니다.사이트를 어떻게 설계했는지에 관계없이.
-
분명히,이 기사는 당신이 이미 웹 사이트를 가지고 있다고 전제로합니다. 그렇지 않은 경우 웹 사이트를 만드는 방법에 대한 가이드로 시작하십시오.당신은 항상 당신이 기본적인 디자인을 완료 한 후 미세 조정 일이 문서에 반환 할 수 있습니다.
에서 이미지를 회전시키는 방법”데모 사진”이있는 이미지가 있다고 가정 해 봅시다. 회전하려면 다음을 사용하십시오.
사진이 잘못된 방향으로 회전하면rotate(90deg)대신 사용합니다. 짐작할 수 있듯이 원하는 각도를 사용할 수 있습니다. 270 과 90 도의 나의 사용은당신의 주제는 길이가 이제 높이가되도록 그것을 돌리는 것이고 그 반대도 마찬가지입니다.
그러나 위의 코드를 간단히 사용하면 문제가 빠르게 나타납니다. 그림이 중심으로 회전합니다(영어의 다른 변형을 사용하는 경우”센터”). 즉,회전된 이미지가 콘텐츠 위와 아래에 겹쳐집니다.
이 시점에서,당신은 아마 생각할 것입니다. 그것은 쉽게 해결할 수 있습니다. 악은 회전 된 사진을위한 충분한 공간을 제공하는 고정 된 높이로 자신의 사업부 블록에 사진을 넣어 것입니다.”
따라서 그림의 너비는 202 픽셀이고 높이는 42 픽셀이기 때문에 다음과 같이 보입니다.:
불행히도,코드를 그대로 사용하면 컨테이너가 필요한 높이를 가지고 있지만 회전 된 그림이 여전히 위의 단락과 겹칠 수 있기 때문에 그 중심에 피벗이 있기 때문에 본질적으로 남아있는 동안 그 위에 있습니다.
트릭은 회전하기 전에 원래 위치를 조정하여 최종 출력이 올바른 위치에 있도록 하는 것입니다. 회전된 결과가 위의 텍스트를 포함하지 않고 정면으로 배치되도록 하려면 할당된 사업부 블록에서(width - height)/2과 같은 거리를 아래쪽으로 이동해야 합니다(여기서”/”는 나누기 기호를 나타냄). 이 계산을 수동으로 쉽게 수행 할 수 있습니다.결과,또는 최종 번호를 얻은 방법에 대한 기록을 남기고 싶다면 브라우저가”calc((202px - 42px)/2)“으로 계산을 수행하도록하십시오. 당신은 물론,이미지에 적합한 사람에 숫자를 변경해야합니다. 이 튜토리얼에서calc()기능을 사용하여 결과에 어떻게 도달했는지 명확하게 알 수 있습니다.
위쪽 위치 변경은margin-top규칙을 사용하거나translateY()을 사용하여 트랜스폼 함수를 계속 사용하려는 경우와 같이 여러 가지 방법으로 수행할 수 있습니다.
다음 예제에서는 다음을 사용합니다margin-top:
}
아래 코드는 변환 함수를 사용합니다:202 픽셀-42 픽셀/2))회전(270 도));
}
translateY()을 사용하도록 선택한 경우 작업 순서가 중요하므로 변환 전에 변환이 완료되었는지 확인합니다.
위의 데모 그림은 앞에서 설명한 정확한 코드를 사용하여 상단 위치를margin-top로 조정하고 회전했습니다. 그러나 내가 말했듯이,당신은 당신이 원하는 모든 위치 지정 방법을 사용할 수 있습니다.
휴대 전화 나 작은 화면에서 볼 때만 사진을 회전시키는 방법
이 시점에서 휴대 전화와 같은 작은 화면 장치에서 사진을 볼 때만 회전을 수행하려면 해당 장치의@media섹션에 규칙을 배치하기 만하면됩니다.
그건 사실이야. 포인트. 당신이 더 이상의 조치를 취하지 않고 그것을 할 경우,당신은 아마 또 다른 문제를 극복 할 것입니다. 모바일 친화적 스타일 시트에는 일반적으로 다음과 같은 규칙이 있습니다.
이 규칙은 큰 그림의 크기를 조정하여 작은 화면에 맞게 조정합니다. 이것은 당신이 실제로 이미지 크기를 조정하지만 회전하지 않으려는 경우를 제외하고,취할 수있는 올바른 방법입니다. 위의 담요 규칙을 사용하면 이미지를 회전하기 전에 브라우저에 의해 크기가 조정됩니다. 또한 이미지가 더 이상 원래 치수를 갖지 않기 때문에margin-top(또는translateY또는 기타)계산에서 벗어날 것입니다.이 문제를 해결하려면”max-width: none;“를”#demo_picture“규칙에 추가하십시오.
이를 염두에두고 지금까지 축적 한 모든 규칙을 스타일 시트에 추가 할 수 있습니다.
레이아웃 마법사에서 생성한 템플릿을 기반으로 페이지를 만들었으며 629 픽셀을 모바일의 한 열 모드로 전환하는 지점으로 선택했다고 가정해 보겠습니다 phones.In 이 경우”styles.css“파일의”@media“줄 바로 뒤에 규칙을 삽입하십시오.(202 픽셀-42 픽셀)/2)
변환:회전(270 도);2868>부동 소수점:없음;
너비: 100% ;
}
… 그래서…
레이아웃 마법사를 사용하지 않았고,또한 자신의@media섹션을 만드는 방법을 잘 모르는 경우,읽어 보시기 바랍니다. 위의 코드를 맹목적으로 복사하지 마십시오.
당신은 전화(또는 하나를 모방하도록 크기가 조정 된 데스크톱 브라우저 창)에서 페이지를 테스트해야합니다.이미지의 너비와 높이에 따라 결과가 즐겁지 않을 수 있습니다. 예를 들어 사진이 큰 경우 휴대 전화의 오른쪽에 부분적으로 눌러진 최종 출력을 찾을 수 있습니다. 이 경우”margin-left“를 적절한 숫자로 설정하여 왼쪽으로 이동합니다. (팁:margin-left에서 음수를 사용하여 이미지를 원래 경계를 넘어 왼쪽으로 이동합니다.)
브라우저 호환성
변환 기능은 모든 최신 브라우저에서 사용할 수 있습니다. 방문자가 인터넷 익스플로러를 사용하는 경우(이는 지금 사용되지 않습니다),그들은 적어도 버전이 필요합니다 9.
저작권 2020 크리스토퍼 헹. 모든 권리 보유.
웹 디자인,프로모션,수익 및 스크립팅에 대한 더 많은 무료 팁과 기사를https://www.thesitewizard.com/에서 얻으십시오.
이 문서가 유용합니까? 에 게시 된 새로운 기사 및 스크립트를 배울 수 있습니다.마법사.피드에 가입. 단순히 지점 RSS 피드 리더 또는 지원하는 브라우저 RSS 피드에서https://www.thesitewizard.com/thesitewizard.인기 있는당신은 토스 사이트 피드를 구독하는 방법에 대한 자세한 내용을보실 수 있습니다.
이 문서를 다시 인쇄하지 마십시오
이 문서는 저작권이 있습니다. 재생하지 않으나 어떤 모양안에 전체 또는 부분안에 이 기사를,배부하지 말라.웹 사이트 전체(또는 그 열)를 채우기 위해 배경 그림을 늘리는 방법
인기 기사
- 블로그 만들기 방법
- 웹 사이트 만들기/만들기:초보자 가이드
- 좋은 도메인 이름 선택에 대한 팁
- 표현식 웹 자습서: 마이크로 소프트 익스프레션 웹과 웹 사이트를 디자인하는 방법
- 드림위버 튜토리얼:어떻게 블루 그리펀과 웹 사이트를 디자인하는 방법 3
- 어떻게 디자인 및 콤포저(무료 위지위그 웹 편집기)
- 무료 피드백/문의 양식 마법사
이 페이지로 연결하는 방법
그것은 당신의 페이지에 나타납니다:
휴대 전화에서 볼 때 웹 사이트에서 이미지를 회전하는 방법