相关疑难解决方法(0)

我有

body {
    background: url(images/background.svg);
}

期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例.例如,如果原始图像恰好是100*200(任何单位)且正文宽度为600px,则背景图像最终应为1200px高.如果调整窗口大小,高度应自动更改.这可能吗？

目前,Firefox看起来正在调整高度,然后调整宽度.这可能是因为高度是最长的尺寸而且它试图避免裁剪？我想垂直裁剪,然后滚动:没有水平重复.

此外,Chrome将图像置于中心,不重复,即使background-repeat:repeat明确给出,这仍然是默认值.

我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome).我将元素大小设置为21cm x 29.7cm,但是当我发送到打印(或打印预览)时,它会剪切我的页面.

看到这个实例!

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page { …

我目前正在使用IE9和媒体查询,我没有必要在其他浏览器上使用它.

我尝试使用一组规则,如:

@page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
}

// ...符合所有A格式(A0,A1,A2等)的毫米数的规则,包括边距和公差

/* A4 210x297 mm */
@media print and (min-height: 266mm) and (max-height: 288mm) and
    (min-width: 179mm) and (max-width: 201mm) {
    .img_port {
        height: 267mm !important;
    }
}

// ...

它似乎工作但它不可靠,因为传递给CSS的大小高度和宽度值似乎依赖于打印机,即使总是选择A4格式.

我想问的是,是否有任何其他可能的方法来获得相同的结果(根据纸张尺寸在一页上拟合图像).

先感谢您.