html - 在表中动态调整图像大小

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%;}
}

想怎么用就怎么用

谢谢