选择,然后使用jQuery调整具有一定比例的图像大小
Select, then resize images that have a certain ratio with jQuery
在我的Tumblr博客上,我正在尝试使用jQuery来选择具有特定比例的照片条目(imgs),并以某些方式调整它们的大小。
具体来说:如果图片的宽度大于 250 像素,请调整其大小,使高度为 250 像素,宽度为"自动"。 如果图像的高度大于 250px,请调整其大小,使宽度为 250px,高度为"自动"。 最后,如果图像是完美的正方形,请将其大小调整为 250px x 250px。这是我目前正在使用的。 如果它的编码很奇怪,请原谅我,老实说,我只是摆弄它,直到我得到一些想要的结果......
<script>
$(document).ready(function() {
$('.photo_post img').each(function() {
var maxWidth = 250; // Max width for the image
var maxHeight = 250; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(height > maxHeight){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height < maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});
</script>
我的问题是它无法在所有照片上正常工作。
我对jQuery不是很熟悉,所以深思熟虑和详细的答案是值得赞赏的。
您需要检查图像是纵向还是横向,然后根据此调整大小。
更新的 JS:
$(document).ready(function() {
$('.photo_post img').each(function() {
var maxWidth = 250; // Max width for the image
var maxHeight = 250; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Portrait
if (height > width) {
// Check if the current height is larger than the max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
}
// Landscape
else {
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
}
});
});
相关文章:
- 当按下箭头键时,我的图像以一种奇怪的方式跳跃(HTML+JS)
- 每第n个图像具有下一个循环的余数偏移
- OpenLayers-自定义图像在一层上的马赛克
- 如果图像具有 guid 作为名称,则 jqZoom 不起作用
- CSS-强制图像具有与跨度相同的宽度和高度
- 如何使图像具有响应性
- 在 html5 中预加载图像是一种很好的做法吗?
- 使浮动图像具有相同的边距
- 聚合物 1.2.4 纸张进度和铁图像具有疯狂的边界半径
- jQuery datepicker 解析具有一位数的年份
- 在单击图像时淡出图像(具有 ID)(因此在单击之前 ID 未知)
- 已经为单个图像创建了点击效果,但希望其他图像具有相同的效果
- Wordpress:将图像从一种形式传递到另一种形式
- ui路由器——具有一条路由'的URL与另一个具有$stateParams的状态共享同一级别
- 如何使javascript图像具有响应能力
- 创建具有一个数组属性的Javascript对象
- 仅使某些图像具有流动性
- 数组中具有一组值的循环迭代
- 如何仅查找集合中具有一组ID的最新文档
- AngularJS的设计模式与具有一组公共字段的2个服务一起使用