아주 간단한 질문이므로이 질문을하기 전에 검색을했습니다. 이미지가있어서 웹 페이지의 유일한 요소로 사용하고 싶습니다. 이 이미지는 우리가 전달하고자하는 것을 전달하기 때문에 다른 내용은 없습니다. 이제는 디스플레이되는 장치에 따라 자체 크기를 조정하려고합니다. 다른 옵션이 있는지 알고 싶지만 HTML을 통해이를 달성 할 수 있기를 바랍니다. 이미지를 전체 웹 페이지로 표시하는 방법은 무엇입니까?
은 무엇 당신이 찾고있는 것은background-size 속성입니다
Karsnen
자바 스크립트. href="test.jpg"과 같은 URL을 사용하여 간단히 링크하거나 URL을 직접 알릴 수 있습니다. 브라우저는 어떻게 든 그것을 표시 할 것이고, 브라우저 창 너비에 맞게 확장 할 수 있습니다.
다음 간단하고 더 나은 접근법은 콘텐츠로 내용이 img 인 페이지를 사용하는 것입니다. 너비를 100 % (HTML 또는 CSS)로 설정하여 브라우저 창 너비에 맞게 조절할 수 있습니다. 이렇게하면 너비가 유지됩니다. 브라우저 크기 조정의 품질은 다양하지만 위쪽으로 많이 확장하지 않는 한 일반적으로 좋습니다. 이 접근법에서 이미지의 고유 한 폭은 상당한 위쪽 스케일링을 피하기 위해 충분히 커야합니다 (예 : 2,000 픽셀).
이미지 주위의 기본 간격 (기본 페이지 여백)을 제거하려면 CSS를 사용하는 것이 가장 간단합니다.
예 (로는 "..."유용한 정보로 대체 될 수 있습니다) :
<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
, 감사합니다. <body>에 background-size:cover을 적용하면 뷰포트 크기에 관계없이 이미지의 크기가 자동으로 조정됩니다. 참고 : 커버을 사용하면 이미지가 잘릴 수 있습니다.
background-size의 대체 값은 이입니다. background-size:contain을 적용하면 이전 이미지와 마찬가지로 이미지 크기가 조정됩니다. 참고 :이 방법을 사용하면 이미지를 클립하지 않아도되지만 부정적인/데드 스페이스도 표시됩니다 (때로는 이상적이지는 않음).
다음 반영해야한다 귀하의 CSS : 적절한 background-size (예 contain을)를 background-image로
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover; /* or background-size: contain */
}
설정을하고 사용
html {
height: 100%;
}
body {
background: url('to/your/image.png') no-repeat;
background-size: contain;
}
내가 이것을 사용 : css
#body{
background:url(../img/bg.jpg);
margin: 0;
}
당신은 웹 리소스 ("페이지")와 같은 이미지를 사용할 수 있습니다
$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
브라우저 크기 조정에 반응하지 않고 이미지 크기를 변경하지 않으며 여백도 잘 재생되지 않으며 이에 대해 매우 효율적인 방법이 아닙니다. – Ryan
죄송합니다. 전 페이지의 배경을 원하는 크기의 이미지로, 내 실수로 생각하고 있습니다. – quatermain
당신은 이미지보다 더 많은 마크 업이 필요합니다 - – Oded
"크기 조정"...뿐만 아니라 CSS를 사용하여 - 완전히 채우기 위해 브라우저 창? 또는 특정 분/최대 크기?또는 브라우저 창의 비율? – MrWhite