1

さて、アプリケーション (画像スライダー) を動的にしようとしています。これを行うことで、「#application」に最大幅のみを設定し、高さは設定しません。高さを設定するのは、最初のスライドを「#application」に追加し、「$current_slide」(最初のスライド) の高さを取得してから、「.content_container」(スライドを含む) に高さを設定するときだけです。 ) 親の高さ (「#application」の高さ) を使用して。

ここで(私にとっては非論理的な)問題が発生します.current_slideの高さから高さを設定すると、余分な6ピクセルが追加され、その理由がわかりません..

(さらにコードが必要な場合はお知らせください)

HTML 構造 (ご覧のとおり、アプリケーションの高さは 476px ですが、スライド イメージの高さは 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%;
}
4

0 に答える 0