데스크톱이 아닌 모바일 장치에서 이미지를 전체 화면으로 만드는 방법은 무엇입니까?

내 사이트가 건설 중임을 알리기 위해 이미지를 넣었습니다. 데스크톱에서 액세스 할 때 원본 크기로 유지되는 800x600 이미지입니다. 그것은 페이지의 유일한 것입니다.데스크톱이 아닌 모바일 장치에서 이미지를 전체 화면으로 만드는 방법은 무엇입니까?

휴대 전화에서 사람들이 액세스 할 때 전체 화면에 맞게 만들고 싶습니다. 방법?

<style type="text/css"> 
    body { background-color: #6BC5C5; } 
</style> 
<title>Size is being moved to another server</title> 
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;"> 
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>

출처

2013-02-15 PSyLoCKe

사용하려는 것은 미디어 쿼리입니다. 미디어 쿼리를 사용하면 화면 크기에 따라 다른 CSS 규칙을 적용 할 수 있습니다. 예를 들어

@media only screen and (max-width: 600px) { 

    img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;} 
}

장치 화면 600PX거나 작은 경우의 전체 폭과 높이를 이동 underconstruction의 ID와 IMG 강제

. 다음 메타 태그를 모바일 기기에서 : 1 비율 :

새로운 아이폰은 또한 480

, 당신은 1 뷰 포트를 강제해야보다 더 큰 높이를 가지고 있기 때문에 600은 좋은 크기입니다

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="HandheldFriendly" content="true">

출처

2013-02-15 14:21:45 BBagi

넵,이 방법이 가장 좋습니다. +1 –

그리고 내 그림에 세로 스크롤이 필요한 경우 height : *를 사용할 수 있습니까? 100 % 대신에? – PSyLoCKe

@EASI 이미지가 너무 크면 장치가 수직으로 스크롤됩니다. 나는 어떤 신장인지 모르겠다. – BBagi

설정 다음으로 이미지의 스타일 : 이것은 800 × 600까지 부모에게 이미지의 크기를 확대 할

width: 100%; 
height: 100%; 
max-width: 800px; 
max-height: 600px;

. 상위 요소가 창의 너비 인지도 확인하십시오.

출처

2013-02-15 14:22:52 gimg1

당신은 폭이 주어진 max-width 아래에만 스타일 정보를 적용이

@media all and (max-width: 768px) { 
/* 768px is usually the width of tablets in portrait orientation */ 
/* You can use any other size you see fit */ 

    img {width: 100%;} 
}

이에 대한 CSS 미디어 쿼리를 사용할 수 있습니다.

출처

2013-02-15 14:23:10

데스크톱이 아닌 모바일 장치에서 이미지를 전체 화면으로 만드는 방법은 무엇입니까?

답변

관련 문제