Reputation: 45
I know this question has been answered many times. However, my code does not seem to work despite I literally got it from the internet. I probably do something wrong, but what exactly I could not figure out.
I put the following JS code inside the HTML <head>
tag :
$(document).ready(function() {
var imwidth = $('#jspp').width();
var imheight = $('#jspp').height();
if (imwidth < imheight) {
$('#jspp').width(100);
} else {
$('#jspp').height(100);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
<img id="jspp" src="https://placehold.it/300x300">
</div>
</body>
Does somebody have an idea of what could be wrong?
Thanks in advance!
Upvotes: 0
Views: 38
Reputation: 12161
Here you go with a solution https://jsfiddle.net/027q85w8/
$(document).ready(function() {
var imwidth = $('#jspp').width();
var imheight = $('#jspp').height();
if (imwidth < imheight) {
$('#jspp').css('width', '100px');
} else {
$('#jspp').css('height', '100px');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="jspp" src="http://via.placeholder.com/350x150">
</div>
Two things were wrong in your code.
)
at the end of document.ready
100px
in width & height.Hope this will help you.
Upvotes: 1