好吧,我正在尝试使我的应用程序(图像滑块)动态化。通过这样做我只在“#application”上设置了最大宽度而不是高度。我设置高度的唯一时间是当我将第一张幻灯片附加到“#application”并获取“$ current_slide”(第一张幻灯片)的高度时,然后我在“.content_container”(包含幻灯片)上设置高度)使用父高度(“#application”)的高度。
现在来了(对于我unlogic)问题:当我从current_slide高度设置高度时,它增加了额外的6个像素,我无法理解为什么..
(如果需要更多代码,请告知我们)
HTML结构(如您所见,应用程序高度为476px,但幻灯片img高度为470px ..)
<div id="application" class="application" style="height: 476px;">
<div class="application-content-container" style="height: 476px;">
<div id="slide-0" class="application-content" style="width: 700px;">
<img alt="01" src="images/01.jpg">
的JavaScript
// Get first slide & add
var current_slide = getSlide(current_id);
content_container.append(current_slide);
// Set application height based on loaded slide
application.css('height', current_slide.height());
// Set content container height based on parent height
content_container.height(parseInt(application.height()));
CSS
.application {
position: relative;
background: #CCC;
margin: 0 auto;
max-width: 700px;
}
.application-content-container {
position: relative;
overflow: hidden;
}
.application-content {
position: absolute;
top: 0;
left: 0;
}
.slide img {
width: 100%;
}