个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用backstretch一个部门内部。我已经弄清楚如何做到这一点here但图像的宽度仍在拉伸(stretch)以填充整个 body 。有没有办法控制后拉伸(stretch)图像，使其填充分区的高度和宽度，而不是整个 body ？ (划分是流动的，否则我会使用静态背景图像。)
最佳答案
*编辑:自从我写这篇文章以来，我已经停止在正常设置下使用后拉伸(stretch)，因为它似乎在 Android 智能手机上或平板电脑方向改变时根本无法正常工作。然而，这里解释的这个修改仍然很好用，所以如果你想要一个固定高度的版本，请继续阅读 - 我已经附上了下面的 JS，HTML 是；
<body> <div id="backimage"></div> </body>
这是 JS 文件的链接 -> http://www.mcnab.co/backstretch.js
我想使用 backstretch 来填充一个全宽但只占据屏幕顶部 560px 的元素。如果图像的大小必须调整为大于原始图像，它不会垂直居中，而是会偏移，因此顶部消失。
是的，上面的链接是正确的，您将容器从正文更改为要填充的元素，在本例中为#backimage
// Append the container to the #backimage, if it's not already there
if($("#backimage #backstretch").length == 0) {
$("#backimage").append(container);
}
然后我更改了代码，为加载的图像分配固定高度的 css，而不是 100%；
// If this is the first time that backstretch is being called
if(container.length == 0) {
container = $("<div />").attr("id", "backstretch")
.css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "560", width: "100%"});
} else {
// Prepare to delete any old images
container.find("img").addClass("deleteable");
}
为了实现这一点，_adjustBG 方法必须进行相当多的更改。首先，您需要为 imgWidth 和 imgHeight 变量提供全局范围。将它们从
中删除var self = $(this);
并将它们添加到
rootElement = ("onorientationchange" in window) ? $(document) : $(window),
imgRatio, bgImg, imgWidth, imgHeight, bgWidth, bgHeight, bgOffset, bgCSS;
最后，我重写了 _adjustBG 方法的一部分以使用 imgWidth 和 imgHeight，而不是全部基于检测到的浏览器宽度和高度。
function _adjustBG(fn) {
try {
bgCSS = {left: 0, top: 0}
bgWidth = rootElement.width();
bgHeight = bgWidth / imgRatio;
if( bgHeight <= 560 ) {
bgHeight = 560;
bgWidth = 560 * imgRatio;
bgOffset = ( bgWidth - rootElement.width() ) / 2;
if(settings.centeredY) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
} else {
bgHeight = (rootElement.width() / imgRatio);
bgWidth = rootElement.width()
bgOffset = ( bgHeight - 560 );
if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
}
$("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
.filter("img").css(bgCSS);
} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
}
// Executed the passed in function, if necessary
if (typeof fn == "function") fn();
}
};
这对我很有用，我希望这对其他人有帮助。如果有人来到这里并对我如何做得更好有任何意见，那么我很乐意听到他们的意见。
干杯，
罗比。
关于jquery - 在分区内使用后拉伸(stretch)并将宽度减小到分区的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7125499/
25
4
0
好吧，这是最好用图像来解释的事情...... 我正在寻找一个类似于 StretchBlt 的函数，但我可以将图像复制到定义目标四个角的 Canvas 上，即将图像的梯形/四边形拉伸(stretch)绘
我为 UITextField 制作了一个自定义键盘，其中包含 18 个 UIButton。它是一个 UIView，被设置为文本字段的 inputView。 按钮是在 UIView 的 initWith
我想创建一个 UIButton，它使用可拉伸(stretch)图像作为背景图像，例如我可以轻松调整按钮大小以适应不同的标签等。 所以我创建了以下运行良好的代码: UIImage *bgImage =
我正在尝试拉伸(stretch) UIImageView 中的图像 - 但我惨败了:) 以下设置: 带有 View 和附加到该 View 的 UIImageView 的 NIB 文件。 使用IBOut
我一直在尝试使用 html Canvas ，但由于某种原因，很难让它不拉伸(stretch)东西。我试过只使用 screen.width 和 screen.height，但我通过使用 screen.a
我想拉伸(stretch)上图的左右两侧，并保持中间的箭头不拉伸(stretch)。我怎样才能做到这一点？ 最佳答案 如果你不喜欢打扰 Photoshop 并且图像不需要动态调整大小，你可以使用我在
我的页脚在一个容器中有四列。它需要在容器内以与上面的内容对齐。 我的问题是我想让左栏有红色背景，但目前它不会拉伸(stretch)，因为它显然在容器中。 我怎样才能将它向左拉伸(stretch)整个宽
有没有办法拉伸(stretch)按钮，使中央部分保持完整？ 9-patch 不允许这样做。 编辑:我按照 Benito 的建议使用了 9-patch。它工作正常。奇怪的是，我第一次无法得到它。 最佳答
我想拉伸(stretch)上图的左右两边，中间的箭头不拉伸(stretch)。我该怎么做？ 最佳答案 如果你不想打扰 Photoshop 并且如果图像不需要动态调整大小，你可以在 UIImage 上使
我创建了一个 9patch 图像，不知何故它只能垂直拉伸(stretch)。我尝试了其他 9-patch 图像，但它们具有相同的效果，为什么它们在其他情况下工作。所以我认为 9patch 应该没问题。
我需要在边框控件(或类似控件)中绘制一些简单的线条，这些线条始终延伸到边框的边界。有没有办法只拉伸(stretch)线条而不是它的笔？不涉及大量 C#？ 在这个版本中，线条延伸:
这是我的 XAML 及其外观:
编辑:答案将允许背景图像根据 body 的大小改变它的高度。如果正文是 500px 高，它应该是 100% 宽度，500px 高度。或 100% 宽度 2500 像素高度。 也许我错过了这件事，但我正
我有一个 UILabel。我设置了尾随和前导空间约束，还添加了对齐 Y 中心约束。我已将行数设置为零。 我的目标是将 UILabel 拉伸(stretch)到某个最大宽度，然后添加新行。在给定的约束条
我正在制作一个网站，对于该网站，我正在使用顶部的导航栏。我想要的是将栏放在页面的顶部，并且它是主页的单独颜色。这是我当前的代码: body { font-family: "Baloo Bhaina
我编写了代码来 reshape 已纹理化的四边形。当我拉伸(stretch)四边形时，图像确实按照我的预期拉伸(stretch)了。我似乎在拉伸(stretch)图像时有两个不同的三角形，图像被拉伸(
我在 div 中嵌入了 YouTube。此 div .entry-content 的 max-width 为 30em。 YouTube 嵌入我想要全窗口宽度，延伸到 #container 之外。为此
看: //UIImageView* stretchTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]
我有一个 super 简单的网页，由纯 HTML/CSS 组成。正如预期的那样，当我在本地运行它时，一切正常。 但是，当我部署它时(使用 Droppages，一个通过 Dropbox 的静态页面托管平
我正在尝试将一个 9 色 block 图像设置为我的一项 Activity 的背景，但它不必要地拉伸(stretch)，使一切变得奇怪。我使用 draw9patch 创建它，并在左下角添加了一个像素，
我是一名优秀的程序员,十分优秀！