有没有一种方法可以使用cycle2根据图像是垂直还是水平来调整图像的大小？
[英]Is there a way to resize images based on if they are vertical or horizontal using cycle2?
问题描述
I want to resize the picture so the whole picture is always visible without scroll bars. 
我想调整图片的大小，以便整个图片始终可见而没有滚动条。 Landscape pictures should go all the way to the edges, while vertical pictures should have a margin on the side, also, all pictures should be centered. 风景图片应一直到边缘，而垂直图片应在侧面留有边距，并且所有图片都应居中。
All the images have slightly different heights and widths. 所有图像的高度和宽度略有不同。 I am testing it with just 4 pictures, but I later plan to add a lot more. 我仅用4张图片进行测试，但是后来我打算添加更多图片。
This is what I have so far: 这是我到目前为止的内容：
...
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.cycle2.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
display: block;
max-height: 100%;
}
img {
max-width: 100%; max-height: 100%; margin: 0;
}
.cycle-slideshow {
max-width: 100%;
max-height: 100%;
}
</style>
<body>
<div class="cycle-slideshow">
<img src="photos/NYC_Skyline_Revised.jpg" alt="NYC Skyline Photo">
<img src="photos/MinionDrawing-1.jpg" alt="NYC Skyline Photo">
<img src="photos/NYC_Skyline_Daytime.jpg" alt="NYC Skyline Photo">
<img src="photos/HeavenlySunrise-2.jpg" alt="Sunrise Photo">
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
...
1 个解决方案
解决方案1
0 已采纳 2017-07-26 23:11:58
1) check if width is greater than height 1）检查宽度是否大于高度
How to get image size (height & width) using JavaScript? 如何使用JavaScript获取图像大小（高度和宽度）？
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
2) Either 2）
How do I auto-resize an image to fit a div container 如何自动调整图像大小以适合div容器
max-width:100%;
max-height:100%;
or same as above to desired % width for non landscape 或与上述相同，达到非横向所需的宽度百分比
You can use jQuery like $(element).css( "width", "100%" ); 您可以像$(element).css( "width", "100%" );这样使用jQuery $(element).css( "width", "100%" ); to go 100% width of container or browser w/e 使用容器或浏览器的100％宽度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.