gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:21:16 24 4
gpt4 key购买 nike

您好,我正在尝试将图像调整为实际高度和宽度的 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

最佳答案

万一这可能发生在我找到解决方案的人身上,解决方案是一些我没有导入的 .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 - 带有 jquery 标题的 cycle2 幻灯片不合适,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21531200/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com