即使对于稍后动态加载的图像，我也想居中和裁剪图像。
HTML
<body>
<div class="iThumbnail">
<img src="images/art-vertical.jpeg" alt=""/>
</div>
</body>
上面的body内容第一次是静态的。
稍后，body 内容会动态加载/替换为其他图像源。
因此，对于静态内容，我可以使用以下代码将图像居中并裁剪(感谢 jonathanNicol 和 nickCraver)。
$(document).ready(function() {
function thumbnailImageCropCenter() {
$('.iThumbnail').find('img').one('load', function() {
if (($(this).height() > $(this).width()) && ($(this).height() != 0) ) {
$(this).addClass('portraitView');
}
}).each(function() {
if(this.complete) $(this).load();
});
}
thumbnailImageCropCenter();
});
我想避免每次动态加载页面内容时调用 thumbnailImageCropCenter()。
问题:有没有一种方法可以自动将thumbnailImageCropCenter()绑定(bind)到body，使其适用于body中的所有图像，没有如果稍后动态加载图像很重要。
PS:用 .bind() 替换 .one() 没有帮助。
最佳答案
$('body').on('load', '.iThumbnail img', function() {
var $this = $(this);
if (($this.height() > $this.width()) && ($this.height() != 0) ) {
$this.addClass('portraitView');
}
});
关于javascript - 动态加载图像后应用图像居中和裁剪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29060622/