Question

我有一个带有图像/描述的旋转木马和我的身高：自动无法正常工作。计算的高度太大

JSBin： JSBin

我只能猜测这是因为我的.shadow类是相对于身高150px。

请看一下。

编辑：按要求编写的代码

这是来自carousel的一件物品的结果

<div class="carousel2">
    <div class="carousel">
        <div class="owl-carousel owl-theme" id="owl-example" style=
        "opacity: 1; display: block;">
            <div class="owl-wrapper-outer">
                <div class="owl-wrapper" style=
                "width: 4092px; left: 0px; display: block; -webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition: all 200ms ease; transition: all 200ms ease;">
                <div class="owl-item" style="width: 341px;">
                        <div class="pc">
                            <div class="c">
                                <img alt="image" src=
                                "http://www.ramp-alberta.org/_system/ThumbnailCache/UserFilesImageAug~16~Site~1_004jpg.300.-1.-1108757834.jpg">

                                <div class="shadow">
                                    <div class="description">
                                        Event1
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的css

.carousel2
{
    overflow: hidden;
    /* height:400px; */
    background-color: #344754;
}

.carousel
{
    width: 1364px;
    float: left;
    height: auto;
}

.shadow
{
    position: relative;
    bottom: 150px;
    left: 0;
    right: 0;
    background: rgba(222,103,21,0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#B2344855', endColorstr='#B2344855');
    height: 150px;
    vertical-align: middle;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.pc{
    /* border: blue 1px solid; */
    width: 1%;
    display: table;
    margin: auto;
    height: auto;
    overflow: hidden;
}

.c
{
    overflow: hidden;
}

.description
{
    padding-top: 15px;
    font-family: "FSRufus";
    font-size: 30px;
    font-weight: bold;
    color: white;
}

.owl-item
{
    overflow: hidden;
}

Answer 1

你应该给类carousel2一个最小高度，以便CSS知道它需要缩放图像。尝试使用精确尺寸的图像以节省处理时间。同时从阴影类中删除高度。这应该有所帮助。

HTML＆amp; CSS自动高度无法正常工作

1 个答案: