Ich habe ein Hintergrundbild eines DIV, das in jeder Hinsicht ordnungsgemäß angezeigt wird, mit Ausnahme der Skalierung. Ohne es zu sagen, dass es eine Skalierung hat, ist es größer als die Bilddatei, und das möchte ich nicht.
Ich möchte nur, dass es die genaue Größe des verwendeten Bildes hat (216x539). Das im Div angezeigte Bild ist stattdessen irgendwie 268 Pixel breit. Das Bild ist proportional in Höhe und Breite skaliert-ich verwende nur in allen meinen Tests nur die Breite. Zuerst habe ich die Skala überhaupt nicht angegeben. Wenn ich Hintergrundgröße: Auto (oder Auto Auto) verwende, ändert sich nichts. Wenn ich es auf 216px breit eingestellt habe, ist es immer noch falsch. Wenn ich versuche, es nach unten zu skalieren, z. B. indem ich die Größe auf 150px festlegt, skaliert es, aber es ist immer noch nicht die Größe, die sie sein soll (breiter als das Beispiel 150px). Ich habe versucht, Padding/Rand/Rand 0 anzugeben, nur für den Fall. Ich habe überprüft, ob übergeordnete Elemente eine andere Skala als 100% haben (sie nicht). Jetzt weiß ich):
Ich habe ein Screenshot des Bildes auf der Website erscheint und misst die Screensshots (268px). (Nicht viel zu zeigen, aber die beiden Divs sind direkte Kinder des Körpers): < /p>
*{
margin:0;
z-index: 0;
box-sizing: border-box;
}
html{
min-height:100%;
position:relative;
}
html,body{
height:100%;
}
#bgleft,#bgright{
position:absolute;
top:0;
left:0;
background-repeat: repeat-y;
background-size: 216px auto;
height:100%;
width:100%;
}
#bgleft{
background-image: url("
https://picsum.photos/216/200");
background-position: left top;
z-index: -1;
}
#bgright{
background-image: url("
https://picsum.photos/216/200");
background-position: right top;
z-index:-2;
}< /code>
Mobile version