动态调整表中的图像大小

Question

我希望在浏览器大小改变分辨率的情况下动态调整我所制作的表格中的图像。目前，如果浏览器变小，则会使其他列非常小/不切实际或完全切断列。

这是我的表HTML / CSS的JSFiddle：https://jsfiddle.net/zc2m9wq3/

我已经尝试过代码：<img style="height:auto; width:auto; max-width:300px; max-height:300px;" src="...">我发现的是max-width和max-height似乎不起作用。图像刚刚达到其全分辨率。

如果有人能给我一些指导，我会非常感激。如果需要，我也可以在这里发布我的HTML和CSS，而不仅仅是JSFiddle。 谢谢。

Answer 1

您通常有两种方式。

首先设置图片大小百分比

像这样。

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

其次是使用媒体查询。 （实际上从第一路升级）

实施例（的 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%;}
}

你可以使用你想要的东西

由于