Tôi nghĩ rằng một bản cập nhật cho những câu trả lời này là hữu ích bởi vì một trong những câu trả lời được gửi tốt nhất cho thấy sử dụng ____10 và ClientHeight, mà tôi nghĩ bây giờ đã lỗi thời. Tôi đã thực hiện một số thí nghiệm với HTML5, để xem giá trị nào thực sự được trả về. Trước hết, tôi đã sử dụng một chương trình có tên Dash để có cái nhìn tổng quan về API hình ảnh. Nó nói rằng <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
1 và <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
2 là chiều cao/chiều rộng được hiển thị của hình ảnh và <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
3 và <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
4 là chiều cao/chiều rộng nội tại của hình ảnh (và chỉ là HTML5).Tôi đã sử dụng hình ảnh của một con bướm đẹp, từ một tập tin có chiều cao 300 và chiều rộng 400. Và JavaScript này: var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Sau đó, tôi đã sử dụng HTML này, với CSS nội tuyến cho chiều cao và chiều rộng. <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Results: /*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Sau đó tôi đã thay đổi HTML thành phần sau: <img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
tức là sử dụng các thuộc tính chiều cao và chiều rộng hơn là các kiểu nội tuyến Results: /*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
Sau đó tôi đã thay đổi HTML thành phần sau: <img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
tức là sử dụng các thuộc tính chiều cao và chiều rộng hơn là các kiểu nội tuyến Results: /*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Chủ đề: JavaScript / JQueryPrev | Tiếp theoPrev|Next Trả lời: Sử dụng thuộc tính JavaScript <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
0Bạn có thể chỉ cần sử dụng thuộc tính JavaScript <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
0 để có được chiều rộng và chiều cao hiện tại của hình ảnh. Thuộc tính này sẽ làm tròn giá trị cho một số nguyên.Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Current Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var currWidth = myImg.clientWidth;
var currHeight = myImg.clientHeight;
alert("Current width=" + currWidth + ", " + "Original height=" + currHeight);
}
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Current Image Size</button></p>
</body>
</html>
Câu hỏi thường gặp liên quanDưới đây là một số Câu hỏi thường gặp liên quan đến chủ đề này: - Cách nhận kích thước hình ảnh hiện tại trong JavaScript
- Cách tăng và giảm kích thước hình ảnh bằng cách sử dụng JavaScript
- Cách thay đổi nguồn hình ảnh bằng cách sử dụng jQuery
Chủ đề: JavaScript / JQueryPrev | Tiếp theoPrev|Next Trả lời: Sử dụng thuộc tính JavaScript <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
0Bạn có thể chỉ cần sử dụng thuộc tính JavaScript <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
0 để có được chiều rộng và chiều cao hiện tại của hình ảnh. Thuộc tính này sẽ làm tròn giá trị cho một số nguyên.Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>
Ngoài ra, nếu bạn muốn thực hiện cùng một nhiệm vụ với jQuery, bạn có thể sử dụng phương thức /*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
1 kết hợp với phương thức /*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
2, như được hiển thị trong ví dụ sau:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Real Image Dimensions</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// Create dummy image to get real width and height
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
});
});
});
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button">Get Original Image Size</button></p>
</body>
</html>
Câu hỏi thường gặp liên quanDưới đây là một số Câu hỏi thường gặp liên quan đến chủ đề này: - Cách nhận kích thước hình ảnh hiện tại trong JavaScript
- Cách tăng và giảm kích thước hình ảnh bằng cách sử dụng JavaScript
- Cách thay đổi nguồn hình ảnh bằng cách sử dụng jQuery
| 
