首先,抱歉这个菜鸟问题。我不认为这里的答案会增加21世纪对计算机科学的理解,但我很感谢社区的帮助。
我正在尝试,就以下链接的CodePen项目而言:
这是项目CodePen的链接,它(当然)在其中有一些调试代码作为JS,以及名为#hacky-*
的ID:
http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=0010。我尝试这项工作的一些尝试实际上使页面变得更糟(图像现在在某些尺寸下会出现一些正在进行的段落)。
当您显示/缩小显示的宽度时,显然包含图像的div正在改变高度,所以jQuery:
$(window).on("resize", resizeImage)
function resizeImage() {
var x = $("#hacky-p-id").outerHeight();
$("#hacky-img-id").css("height", x);
$("#hacky-h3-id").text("Height: " + x);
console.log("yes!");
}
正在产生效果,绝对不是我想要的效果(实际上是倒数)。它应该是一个img-fluid
这个事实很复杂,我认为它可以在定义的高度上很好地工作,但我没有足够的知识基础来完全理解幕后可能发生的事情。
非常感谢任何帮助。
答案 0 :(得分:2)
问题1 :您在jquery.min.js
之后加载bootstrap.min.js
问题2 :您没有加载Bootstrap 4所需的tether.min.js
。
问题3 :您已将#hacky-p-id
放在错误的段落上...
问题4 :...您已将#hacky-img-id
放置在图像的容器上,这不会缩小图像。
此时我停止了计数,因为我发现你的标记完全被打破了。在HTML
中,关闭所有正在打开的配对标记非常重要。
你应该避免的另一件事是嵌套container-fluid
。唯一可接受的嵌套Bootstrap container
是指container
作为container-fluid
的直接子项。大多数其他container
嵌套将导致边缘/填充问题,大多数人发现很难调试/修复。实际上,一旦你有container
,你就不需要另外一个(除了上面的例子) - 你需要的只是row
> col-*-*
组合。
这是你的笔"fixed" version。但是,我没有做你最初要求的事情,并且根据段落的高度缩小了图像,因为我碰巧认为这是一个非常糟糕的设计决策,因为它有可能产生严重的渲染问题:当您调整图像大小以使其高度与段落高度匹配时,它将改变宽度,使段落重排并(可能)改变高度,使图像再次调整大小,使段落重新流动,等等......这有可能进入渲染循环,这将停止慢速设备并导致浏览器崩溃。简而言之, 从不这样做 的明显案例。
我并不特别赞同的其他决定,但是没有"修复"是:
.jumbotron
vmax
中表示字体大小。您应该rem
使用后备px
。这是安全可靠的解决方案。