Use javascript to adjust dimensions(height/width) of src img tag with respect to media querry css

1

guys is it possible that i could use javascript to alter height and width of my image in img src tag with respect to my media querry in css for instance with respect to the smallest media querry (for handheld devices)
media only screen and (max-width: 769px)

snake hook

the above is my height n width of image in img tag now when i change width to auto and height to 500px in my img tag when i use the chrome dev tools toggle device tool the above given image just slides out of the mobile screen the image no longer remains responsive
i know this is a complicated question given the fact that i have assigned specific cs code to my MEDIA QUERRY FOR HANDHELD DEVICES “media only screen and (max-width: 769px)” and then there is the bootstrap that im using to make my website responsive its a mess
but could there be a way out of this

2

I’m not 100% sure I understand your question, so I hope I’m on target here. You want JavaScript to change the dimensions of your img tag, but only when a certain media query is triggered, right?

You haven’t said why just using CSS doesn’t work, but if that fails, you still have a few options. One is to define a class in the media query with the dimensions you want. Then, use JavaScript to add that class when the window’s width hits your target. You can get this property with window.outerWidth. You could also change the dimensions via JavaScript in this way, but that’s less performant than CSS.

3

but css apply to an image if it is in img tag
not much works other than height and width properties in css
so how can i apply css to the image in my img tag?
i got the javascript part but not the css

4

You don’t need JavaScript to do this.

I think from the sound of it you just need to add

img {
    max-width: 100%
}

This will make your image scale. It makes the image to be never more than 100% of its container.

1 Like