Hướng dẫn css fit div to print page - css vừa với div để in trang

Trong trang của tôi chỉ có một hình ảnh. Loại 1500x3000 px. Trong máy in, tôi cần rằng chiều rộng tối đa của hình ảnh này là chiều rộng của trang, vì vậy tôi đã làm: chiều rộng 100% trong CSS và nó hoạt động. Nhưng chiều cao ... sự nhảm nhí cũ của chiều cao 100% sẽ không bao giờ hoạt động. Bởi vì nó luôn luôn là 100% của container cha mẹ, thì ai đó phải có chiều cao được xác định. Hoặc html hoặc cơ thể. Vì vậy, câu hỏi của tôi là: Làm cho hình ảnh này phù hợp với một trang. Bất kỳ ý tưởng?
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?

hỏi ngày 12 tháng 3 năm 2010 lúc 18:53Mar 12, 2010 at 18:53

Một cách để làm điều đó là thực hiện một số tính toán để tìm ra chiều rộng nào sẽ khiến chiều dài chính xác là một trang, và sau đó đặt chiều rộng của bạn trong CSS phù hợp.

Đã trả lời ngày 12 tháng 3 năm 2010 lúc 19:01Mar 12, 2010 at 19:01

Robert Harveyrobert HarveyRobert Harvey

175K46 Huy hiệu vàng330 Huy hiệu bạc491 Huy hiệu Đồng46 gold badges330 silver badges491 bronze badges

1

Nếu tôi hiểu điều này đúng, bạn có thể làm

.OnePageImage { height: 100%; width: 600px; }

Trong đó 600px (chiều rộng) là tổng chiều rộng của trang. Sau đó, hình ảnh sẽ phù hợp với một trang (mặc dù có một số biến dạng có khả năng). Bạn cũng có thể thêm kiểu ngắt trang CSS vào div trước và sau hình ảnh, được thực hiện như thế này:

.break { page-break-after:always; }

Sau đó, mã sẽ như thế này:

Đã trả lời ngày 8 tháng 5 năm 2010 lúc 23:32May 8, 2010 at 23:32

ThejermthejermtheJerm

4.3722 Huy hiệu vàng26 Huy hiệu bạc23 Huy hiệu Đồng2 gold badges26 silver badges23 bronze badges

2

Điều duy nhất giới hạn đầu ra in ở một trang đối với tôi là đặt chiều cao tính bằng cm của một phần tử container bao bọc toàn bộ trang và cũng đặt nó tràn vào ẩn. Vì một số lý do, điều này dường như không hoạt động trên yếu tố cơ thể.

body > section {
    padding:0 !important;
    margin:0 !important;
    height:25.7cm !important;
    overflow:hidden !important;
}

Ngẫu nhiên, tôi đã hy vọng rằng việc thiết lập phá vỡ trang để tránh trên cơ thể hoặc phần tử container có thể là giải pháp để giới hạn một trang in nhưng dường như không có tác dụng gì cả.

Smartrahat

5.0736 Huy hiệu vàng45 Huy hiệu bạc67 Huy hiệu Đồng6 gold badges45 silver badges67 bronze badges

Đã trả lời ngày 24 tháng 4 năm 2013 lúc 14:56Apr 24, 2013 at 14:56

không nguyên tửatomless

1.27214 Huy hiệu bạc18 Huy hiệu đồng14 silver badges18 bronze badges

Được rồi, xin lỗi vì đã đặt "giải pháp" làm bình luận:

Những gì tôi đã kết thúc là cho rằng 99% khách hàng (đó là sự thật) họ sử dụng một kích thước trang duy nhất. Vì vậy, tôi đặt một số cảnh báo trong giao diện in sẽ chỉ hoạt động với kích thước trang "X". quá tệ. Nhưng nó đang hoạt động cho đến nay

Đã trả lời ngày 12 tháng 2 năm 2011 lúc 18:16Feb 12, 2011 at 18:16

BluefootBluefootbluefoot

9.90011 Huy hiệu vàng42 Huy hiệu bạc55 Huy hiệu Đồng11 gold badges42 silver badges55 bronze badges

Thí dụ

Luôn luôn chèn một phá vỡ trang sau một yếu tố: & nbsp;

@Media in {& nbsp; Footer {page-break-sau: luôn luôn;}}
  footer {page-break-after: always;}
}

Định nghĩa và cách sử dụng

Thuộc tính page-break-after thêm một lần ngắt trang sau một phần tử được chỉ định.

Mẹo: Các thuộc tính: Trang phá vỡ trang trước, giúp phá vỡ trang và giúp đỡ trang để xác định cách một tài liệu nên hoạt động khi được in. The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Lưu ý: Bạn không thể sử dụng thuộc tính này trên các yếu tố trống hoặc hoàn toàn được định vị. You cannot use this property on an empty