Tôi có một hình ảnh dưới dạng div id myimage. Bây giờ tôi muốn thay đổi kích thước bằng cách sử dụng thay đổi. Tôi muốn từ hộp chọn nếu chọn 700X7000 thì kích thước của hình ảnh sẽ có chiều cao 700px và chiều rộng 700px. Với việc tải lại trang. Bất cứ ai có thể giúp tôi làm thế nào tôi có thể làm điều này?thay đổi kích thước hình ảnh bằng jquery
Vâng, để thay đổi nó, bạn có thể chỉ cần đặt của hình ảnh width() và height():
$('#myimage').width(700); // Units are assumed to be pixels
$('#myimage').height(700);
Vì vậy, để bạn có thể làm hộp thả xuống, bạn chỉ có thể thiết lập các giá trị để có một cái gì đó giống như 100x100, 200x200 , v.v. và split giá trị đã chọn để trích xuất thứ nguyên:
var parts = '100x100'.split('x');
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10
var height = parseInt(parts[1], 10);
Điều kiện là nơi bạn có thể nói mục được chọn.
if(condition) {
$('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
$('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
Dưới đây là cách để kiểm tra xem nếu hộp được chọn:
// First way
$('#checkBox').attr('checked');
// Second way
$('#checkBox').is(':checked');
Ví dụ làm việc:
if($('#checkBox').attr('checked')) {
$('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
$('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
Hoặc
Chức năng gửi đối tượng
<img onLoad="ozhpixel(this)"
function ozhpixel(imaj){
$(imaj).width(100); // Units are assumed to be pixels
$(imaj).height(50);}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#photograph").click(function() {
$("img").animate({
height: '+=5px',
width: '+=5px'
});
});
});
}
</script>
</head>
<body>
<div>
<img src="photo/grass.jpg" id="photograph" style="width:304px;height:228px;"/>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/cmxevnp0/3/
Giải thích câu trả lời của bạn bằng lời nói hoặc câu đố. Làm cho nó thêm con người. –
Ai đó có thể muốn kiểm toán tôi về điều này - nhưng không phải có thể giúp bạn tạo một div cho img, và thiết lập img 'max-width' đến 100% và thay đổi kích thước div phù hợp ? – Nic
@melee: Tôi nghĩ bạn có thể làm điều đó trực tiếp với hình ảnh. – Blender