[英]How to prevent scaling of background image using CSS?
I have a high-resolution image that is the background image of a div.我有一个高分辨率图像,它是 div 的背景图像。 The div keeps rendering it at a smaller size but I would like to leave it unscaled. div 一直以较小的尺寸呈现它,但我想保持它不缩放。 I don't mind that the background image is cropped to show only a portion of the image as long as that portion has the original size.我不介意裁剪背景图像以仅显示图像的一部分,只要该部分具有原始大小即可。
Javascript: Javascript:
console.log(img.width) // this comes out 3840px
resultDiv.style.backgroundImage = "url('" + img.src + "')";
resultDiv.style.backgroundRepeat = "no-repeat";
CSS: CSS:
.img-full {//this is the class of the img
max-width: none;
max-height: none;
}
#bottomPanel {//this is the resultDiv that is scaling the background image
height: 30vh;
background: black;
margin-left: 10px;
margin-right: 10px;
overflow-x: auto;
overflow-y: auto;
}
you can specify the following CSS Property您可以指定以下 CSS 属性
background-size: cover;
this will make sure the background covers the whole element regardless if it was cropped or not, different that这将确保背景覆盖整个元素,无论它是否被裁剪,不同的是
background-size: contain;
that will scale the image to be fit within the element and to be fully visible这将缩放图像以适合元素并完全可见
If you would like to prevent scaling by using background-size: cover
.如果您想通过使用background-size: cover
来防止缩放。 This crops the background, and it never stretches for me.这会裁剪背景,对我来说永远不会延伸。
More info about background-size
: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size关于background-size
更多信息: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.