Question

您好我正在尝试将图像调整为实际高度和宽度的75％。问题是，当我这样做时，容器似乎保持100％的大小。我会告诉你：

代码：

<!-- some pretty fonts for this demo page - not required for the slider -->
<link
    href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300'
    rel='stylesheet' type='text/css'>

<!-- load jQuery and the plugin -->
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style>
/* Demo CSS - You do not need this css in your own slider */
html {
    height: 100%;
}

body {
    font-family: "Open Sans", helvetica, arial;
    height: 100%;
}

h2 {
    font-size: 48px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #2778ec;
}

#container {
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
}
</style>
</head>

<body>

    <div id="container">

        <h2>Photos of the day</h2>
        <div style='float: left'>
            <form name='form1' action='FriendsListServlet' method='get'>
                <input type='submit' name='btnsalvar' value='Photos of the day'>
            </form>
        </div>
        <div>
            <form name='form2' action='MapServlet' method='get'>
                <input type='submit' name='btnsalvar' value='My day in map'>
            </form>
        </div>
        <!--  data-cycle-pause-on-hover="true"-->
        <div class="cycle-slideshow"
            data-cycle-caption-plugin=caption2
            data-cycle-auto-height=container>
            <div class="cycle-overlay"></div>
            <c:forEach items="${photosName}" var="photo">
                <img src='images/<c:out value="${photo}" />'
                    title="Automatically generated caption" data-cycle-title="Spring"
                    data-cycle-desc="Sonnenberg Gardens" width="75%" height="75%" />
            </c:forEach>
        </div>
    </div>
</body>

结果如下：

http://tinypic.com/r/25ptm4i/8

这是我试图产生的结果。

http://tinypic.com/r/11tq7eo/8

Answer 1

这种情况可能发生在我找到解决方案的人身上，解决方案是我没有导入的.css和.js。它们如下。

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.caption2.js"></script>

<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme">
<link rel=stylesheet href="http://jquery.malsup.com/cycle2/site.css">
<link rel=stylesheet href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">

带有jquery标题的cycle2幻灯片显示不合适

1 个答案: