个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
大家好。我有一个 div，其背景图像的大小设置为 cover。
如何使用 javascript 或 jquery 获取背景大小？
我的意思是，背景将用其尺寸(宽度或高度)之一填充 div，我想了解完整(计算的)图像的宽度和高度，而不仅仅是可见部分。
<style>
body {width:100%; height:100%}
#fullCoverBg {background-image:url("ani_bg.jpg"); background-repeat:no-repeat; background-size:cover; background-position:right;}
@media all and (max-width : 1000px) {
/* small screens */
aside {height:30%; width:100%;}
#fullCoverBg {height:70%; width:100%;}
}
@media all and (min-width : 1001px) {
/* big screens */
aside {height:100%; width:30%;float:left;}
#fullCoverBg {height:100%;width:70%;float:left;}
}
</style>
<body>
<aside>this div stay on head on small devices, and go on the left side on big screens </aside>
<div id="fullCoverBg"></div>
</body>
假设我们调整 wwindow 的大小，我们将看到背景覆盖整个 div，当然有些部分将不可见，因为“覆盖”填充了 div 的宽度或高度...对于每次调整大小，整个图像的尺寸(可见部分和不可见部分)是多少？
最佳答案
您需要预加载图像。
var background = new Image();
background.src = "your-image.jpg";
var bgHeight = background.height;
var bgWidth = background.width;
好吧，这就是真正的答案。这需要一些思考，并从这个答案中借用了一些代码:How can I determine the background image URL of a div via JavaScript?
但是，我终于明白了。我看到您想要一个 jQuery 答案，但我只在 Native、JS 中工作，对于断开连接感到抱歉。
编辑:我发现了一些缺失的逻辑，所以我把它放进去了。现在应该可以了，希望如此。
http://jsfiddle.net/TLQrL/2/ - 反射(reflect)新逻辑的新链接
var div = document.getElementById("myDiv");
var style = div.currentStyle || window.getComputedStyle(div, false);
var bg = style.backgroundImage.slice(4, -1);
var background = new Image();
background.src = bg;
background.onload = function() {
if (background.width > background.height) {
var ratio = background.height / background.width;
if (div.offsetWidth > div.offsetHeight) {
var bgW = div.offsetWidth;
var bgH = Math.round(div.offsetWidth * ratio);
if (bgH < div.offsetHeight) {
bgH = div.offsetHeight;
bgW = Math.round(bgH / ratio);
}
} else {
var bgW = Math.round(div.offsetHeight / ratio);
var bgH = div.offsetHeight;
}
} else {
var ratio = background.width / background.height;
if (div.offsetHeight > div.offsetWidth) {
var bgH = div.offsetHeight;
var bgW = Math.round(div.offsetHeight * ratio);
if (bgW > div.offsetWidth) {
bgW = div.offsetWidth;
bgH = Math.round(bgW / ratio);
}
} else {
var bgW = Math.round(div.offsetWidth / ratio);
var bgH = div.offsetWidth;
}
}
console.log(bgW + ", " + bgH);
}
关于jquery - 检索设置为 "cover"的背景图像的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23518501/
24
4
0
我将视差效果与 background-size: cover; 一起使用。当屏幕分辨率为 +1090px 时没有问题，但如果它更小，背景图像开始隐藏在底部 div 下。 这是我的 bg img 的 c
我想存储来自 Coverity® 的结果到 InfluxDB，我想知道 Coverity 是否有 REST API？ 最佳答案 如果您只是想将数据转储到 InfluxDB，您可以从 REST API
这个问题在这里已经有了答案: How to remove the stripes that appears when using linear gradient property [duplica
我已经建立了一个项目来使用 Coverity Scan . 在分析设置→项目组件下我有 Component name Pattern Ignore in analysis
我是使用覆盖的新手，这可能不是一个非常具有挑战性的问题，但如果有人能指导我完成设置 . 我首先运行以下命令: cov-configure --compiler/usr/bin/gcc --compty
我使用封面图像填充侧边栏，但在未填充正文的封面图像和封面正文本身之间出现了一条黑线。您可以在实际中看到它 here .我很确定这不是边界或其他任何东西。 谢谢! HTML CSS .co
我正在尝试构建一个背景图片我希望始终填满整个屏幕的网站。 当浏览器窗口又短又宽时，我希望图像展开，以便它的顶部在纵向填满整个屏幕，而其余部分则不可见。 当浏览器窗口又高又薄时，我希望图像展开，以便它的
我需要在其中一个元素上设置“封面”背景。 使用 CSS background-size: cover 与实际 img 和 object-fit: cover 的优缺点是什么？ 最佳答案 除了其他人所说
我正在尝试用图像填充 div，同时保持其纵横比。但是我不想使用带有 background-size: cover 的背景图像，甚至不想使用 object-fit: cover 属性，我想要它们使用 i
这是我非常简单的 C++/CMake .travis.yml env: global: # The next declaration is the encrypted COVERITY_SC
在我通过启动并运行一个 100% 覆盖率的小型 C++ 测试项目来了解更多关于自动化测试的过程中，我遇到了以下问题——尽管我所有的实际代码行和所有执行分支都是被测试覆盖，lcov 仍然报告两行未经测试
我已经用 coverity-scan 注册了一个项目过去。 我现在想从 coverity-scan 中删除该项目(或者至少从我的仪表板中删除；但我更希望完全删除该项目)。 我被卡住了，因为网络界面中似
我通过覆盖工具收到以下错误 - overrun-buffer-arg:通过将 4 字节的结构类型 in_addr 传递给使用参数“8UL”在字节偏移量 7 处访问它的函数来溢出 4 个字节。 示例代码
有一个覆盖警告类型:UNUSED_VALUE。这是由“代码可维护性问题”下的工具定义的 UNUSED_VALUE:当一个变量被分配一个从函数调用返回的指针值并且从未在源代码中的其他任何地方使用时，它不
对 Java 来说相对较新，但任务是检查 Coverity 缺陷。这件事真像我想的那么简单吗？ (我无法说服代码所有者。) 50 // this method is used when
我想在本地虚拟机上使用 Coverity。我创建了简单的 HalloWorld 并使用 Coverity Wizard 来设置分析。一切正常。问题是当我想从终端运行 Coverity 时。它没有“找到
给定以下程序: int main(){ float x = non_det_float(); float y = NAN; if (isnan(y) && x == 1.0f){
我想实现如下的封面流程 我试过 Carousel，但它不是一回事。一些谷歌搜索是否无法找到甚至接近给定示例中实现的封面流程的内容。 最佳答案 一定要看看这个，FancyCoverFlow . Play
如果我使用 background-size: cover 并且我想确保我的图像在分辨率为 2880x1880 的视网膜 macbook pro 上看起来不错，我是否只需要使图像达到该分辨率，或者它是否
我有两个 block 元素，第一个 ( ) 是浏览器窗口的大小并呈现动态大小的背景图像(使用 background-size: cover; )。另一个是固定的 高度恒定为 62px 和更大的 z-
我是一名优秀的程序员,十分优秀！