Dynamically Resize Image Within Table

Question

I'd like to dynamically resize images within a table I have made as the size of the browser changes resolution. At the moment if the browser is made small it makes the other columns very small/impractical or cuts off a column entirely.

Here is a JSFiddle of my table HTML/CSS: https://jsfiddle.net/zc2m9wq3/

I've already tried code like:<img style="height:auto; width:auto; max-width:300px; max-height:300px;" src="..."> what I found though is max-width and max-height does not seem to work. The image just goes to its full resolution.

If someone could give me some guidance I would greatly appreciate it. I can also post my HTML and CSS here instead of just JSFiddle if required. Thank you.

Answer 1

You have typically two ways.

First is set your image size percent

like this.

<img src="..." style="width:100%; height:auto; min-width:(what you want)">

Second is use media query. (actually upgrade from first way)

example(CSS)

img{ width:100%; height:auto; }
@media screen and (max-width: 960px){
    img{width:90%;}
}
@media screen and (max-width: 640px){
    img{width:80%;}
}
@media screen and (max-width: 320px){
    img{width:70%;}
}

you can use what you want

Thanks