My bootstrap setup seems to be causing issues when using the @media (min-height: 1000px) rule as the image class does not respond as expected.
I am looking to implement a JavaScript solution that will automatically resize images once the screen height exceeds a certain threshold, let's say 1000 pixels.
The code snippet I have discovered for this purpose is the following:
<script>
$(function() {
if ($(window).height() >= 710) {
$("img").each(function() {
$(this).attr("src", $(this).attr("src").replace("logo1.png", "logo2.png"));
});
}
});
</script>
However, when attempting to modify the code by replacing 'src' with 'width', and adjusting the values of 'logo1.png' and 'logo2.png' to 500 and 800 respectively, no changes occur.
Any guidance on how to achieve this using JavaScript would be greatly appreciated.
I also attempted a CSS approach:
@media screen and (max-width: 980px) and (min-height: 1000px) {
.iphonegangster {
min-width: 950px;
height: auto;
}