jQuery实现图片的等比例缩放
时间: 2023-08-31 22:05:57 浏览: 88
您可以使用jQuery的`width()`和`height()`方法来获取图片的宽度和高度,然后通过比较它们的比例来确定缩放比例,最后使用jQuery的`css()`方法来设置图片的宽度和高度。
以下是一个简单的示例代码:
```html
<img src="example.jpg" id="my-image">
```
```javascript
$(document).ready(function() {
var imgWidth = $('#my-image').width();
var imgHeight = $('#my-image').height();
var imgRatio = imgWidth / imgHeight;
var containerWidth = $('#my-image').parent().width();
var containerHeight = $('#my-image').parent().height();
var containerRatio = containerWidth / containerHeight;
if (imgRatio > containerRatio) {
$('#my-image').css('width', containerWidth);
$('#my-image').css('height', 'auto');
} else {
$('#my-image').css('height', containerHeight);
$('#my-image').css('width', 'auto');
}
});
```
在这个例子中,我们首先获取图片的宽度和高度,然后获取包含图片的容器的宽度和高度。通过比较图片的比例和容器的比例,我们确定缩放比例,并使用`css()`方法设置图片的宽度和高度,保证图片等比例缩放。
阅读全文