javascript 相机幻灯片 v1.3.3 - 调整图片大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13687230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Camera slideshow v1.3.3 - adjust the image size
提问by formedya
I want to create the slideshow of company labels that are of a certain size. I use the script camera.jsto create the slideshow and I need to change the image size:
我想创建具有特定大小的公司标签的幻灯片。我使用脚本camera.js创建幻灯片，我需要更改图像大小：
<link
rel='stylesheet'
id='camera-css'
href='/html/themes/classic/css/camera.css'
type='text/css' media='all'>
<style>
.fluid_container {
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
</style>
<script>
jQuery(function(){
jQuery('#camera_wrap_3').camera({
height: '50%',
pagination: true,
thumbnails: false,
imagePath: '/html/themes/classic/images/'
});
});
</script>
<div class="fluid_container">
<div
class="camera_wrap camera_emboss"
id="camera_wrap_3">
<div
data-thumb="/thumbs/1.jpg"
data-src="/slides/1.jpg"
data-time="1500"
data-trasPeriod="4000"
data-link="some link here"
data-target="_blank">
<div
class="camera_caption fadeFromBottom">
some text here
</div>
</div>
<div
data-thumb="/thumbs/2.jpg"
data-src="/slides/2.jpg"
data-time="1500"
data-trasPeriod="4000"
data-link="some link here"
data-target="_blank">
<div
class="camera_caption fadeFromBottom">
some text here
</div>
</div>
</div>
</div>
<div style="clear:both; display:block; height:100px"></div>
Here are some screenshots.
这是一些屏幕截图。
For max-width == 400px:
对于max-width == 400px：
For max-width == 100px:
对于max-width == 100px：
How to change the size? I need a smaller container and slides should be 310x82.
如何改变大小？我需要一个较小的容器，幻灯片应该是310x82.
回答by cacalacki
You can adjust the height like so
你可以像这样调整高度
jQuery(function(){
jQuery('#camera_wrap_3').camera({
**height: '82px',**
pagination: true,
thumbnails: false,
imagePath: '/html/themes/classic/images/'
});
});
However, I've been unable to affect any change on width.
但是，我一直无法影响宽度的任何变化。
回答by formedya
jQuery(function () {
jQuery('#camera_wrap_1').camera({
alignment: 'center',
maxHeight: $('.slider').outerHeight()+"px",
thumbnails: true
});
});
You can calculate with outerHeight function.
您可以使用 externalHeight 函数进行计算。
回答by xeo
in the version of camera that came with a theme my client bought, there was another tweak in addition to passing the height into the initializer i had to override this style as it had a min-height of 500px which made it impossible to make it the height I needed.
在我的客户购买的主题附带的相机版本中，除了将高度传递给初始值设定项之外，还有另一个调整我不得不覆盖此样式，因为它的最小高度为 500 像素，这使得它不可能成为我需要的高度。
.camera_fakehover {
min-height:50px;
}
