웹 페이지를 인쇄하기위한 안전한 픽셀 너비는 얼마입니까?
내 페이지에 큰 이미지가 포함되어 있으며 인쇄 할 때 잘리지 않도록하고 싶습니다.
다른 브라우저 여백과 US Letter / DIN A4 용지 크기에 대해 알고 있습니다. 그래서 우리는 표준 문자 크기와 일부 기본 DPI 값을 얻었습니다. 그러나 이것을 픽셀 값으로 변환 하여 이미지의 width속성 에 지정할 수 있습니까?
답변:
진정한“보편적 답변”에 대해서는 제공 할 수 없습니다. 그러나 일부 세부 사항에 대해 간단하고 확실한 답변을 제공 할 수 있습니다.
670 픽셀
적어도 이것은 Microsoft 제품에 대한 안전한 대답 인 것 같습니다. 나는 675를 포함하여 많은 제안을 읽었지만 이것을 직접 테스트 한 후 670이 내가 생각 해낸 것입니다.
모든 DPI, 여백 문제, 하드웨어 차이를 제외하고이 대답은 IE9에서 인쇄 미리보기 (표준 여백 포함)를 사용하고 인쇄 크기를 기본값 인 "크기에 맞게 축소"가 아닌 100 %로 설정한다는 사실을 기반으로합니다. , 모든 것이이 너비에서 잘리지 않고 페이지에 맞습니다.
HTML 이메일을 자신에게 보내고 Windows Live Mail 2011 (Outlook Express가 된 것)으로 수신하고 페이지를 670 너비로 인쇄하면 다시 모든 것이 맞습니다. 실제 하드 카피 나 MS XPS 파일 (가상 인쇄물)로 보내는 경우에도 마찬가지입니다.
실험하기 전에는 700의 임의의 너비를 사용했습니다. 위에서 언급 한 모든 시나리오에서 페이지의 일부가 잘 렸습니다. 670으로 줄이면 모든 것이 완벽하게 맞습니다.
너비를 설정하는 방법은 기본 "래퍼"html 테이블을 사용하고 너비를 670으로 정의했습니다.
최종 사용자의 소프트웨어를 지시 할 수 있다면 그러한 문제는 간단 할 수 있습니다. (물론 일반적으로 그렇듯이) 할 수없는 경우 사용중인 브라우저 등과 같은 세부 사항을 테스트하고 중요한 솔루션에 대한 솔루션을 하드 코딩 할 수 있습니다. IE와 FF 사이에서 말 그대로 웹 사용자의 약 90 %를 다룰 것입니다. 일반적으로 작동하는 것처럼 보이는 "다른 모든 사람"에 대한 다른 코드를 넣고 하루라고합니다.
외모만큼 간단하지 않습니다. 나는 비슷한 질문에 부딪 혔고 여기에 내가 얻은 것이 있습니다. 첫째, wikipedia 에 대한 약간의 배경 .
다음으로 CSS에서 종이의 경우 pt포인트 또는 1/72 인치가 있습니다. 따라서 모니터와 동일한 크기의 이미지를 사용하려면 먼저 모니터의 DPI / PPI (위키피디아 기사에 언급 된대로 일반적으로 96)를 알고 나서 인치로 변환 한 다음 다음으로 변환해야합니다. 포인트 (72로 나눔).
그러나 다시 말하지만, 브라우저에는 인쇄 가능한 콘텐츠와 관련된 모든 종류의 문제가 있습니다. 예를 들어 float css 태그를 사용하려고하면 Gecko 기반 브라우저는 페이지 나누기를 사용하더라도 페이지 중간에 이미지를 자릅니다. ; (여기, Mozilla 버그 추적 시스템 참조 ).
A List Apart 에 대한 이 기사에는 브라우저에서 인쇄하는 방법에 대한 자세한 내용이 있습니다.
또한 인쇄 미리보기에서 "Shrink to Fit"너비와 다양한 용지 크기 및 방향을 처리해야합니다.
따라서 width: 511pt;픽셀 크기에 관계없이 좋은 이미지 크기를 인치 단위로 알아 내거나 포인트를 의미합니다 (7.1 "* 72 = 511.2이므로 Letter 크기의 용지에서 작동 함). 또는 너비 비율 너비로 이동하여 이미지 너비를 기준으로합니다. 용지 크기에.
행운을 빕니다...
내가 찾은 문제에 대한 한 가지 해결책은 너비를 인치로 설정하는 것입니다. 지금까지 Chrome에서 작동하는지 테스트 / 확인했습니다. (8.5 x 11 시트를 인쇄하기 위해) 내가 사용했던 것에서 잘 작동했습니다.
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print하면 설정할 수 있습니다. 당신은 설정할 수 있습니다 size: letter또는 size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
인쇄를 위해 너비를 설정하지 않고 인쇄 레이아웃을 동적 너비로 유지하는 장애물을 제거합니다. 즉, 브라우저 창을 더 작게 만들면 콘텐츠가 잘 리거나 숨겨지지 않지만 문서는 길어집니다. 이와 같이 나머지는 프린터 / pdf-creator에서 처리 할 수 있습니다.
이미지 나 표와 같이 너비가 고정 된 요소는 어떻습니까?
내가 생각할 수있는 옵션 :
http://www.intensivstation.ch/en/css/print/
또는 CSS, 인쇄, 미디어, 레이아웃의 조합에 대한 기타 Google 결과
웹 페이지에 인쇄 할 때 이미지가 잘리지 않도록하는 해결책은 다음 CSS 규칙을 사용하는 것입니다.
@media print {
img {
max-width:100% !important;
}
}
프린터는 픽셀을 이해하지 못하고 점을 이해합니다 (CSS의 pt). 가장 좋은 해결책은 모든 측정 값을 점으로 표시하여 인쇄용 추가 CSS를 작성하는 것입니다.
그런 다음 HTML 코드의 헤드 섹션에 다음을 입력하십시오.
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img>태그를 surroundig <div>사업부는 PT의 높이 너비 가져오고 IMG 가져width:100%; height:100%;
width:auto용지의 폭에 내용 너비를 조정 할