在 Table 内动态调整图像大小

Question

我想在 table 中动态调整图像大小，因为浏览器的大小会改变分辨率。目前，如果浏览器变小，它会使其他列非常 small/impractical 或完全切断一列。

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

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

如果有人能给我一些指导，我将不胜感激。如果需要，我还可以在此处 post 我的 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%;}
}

想用就用

谢谢

在 Table 内动态调整图像大小

Dynamically Resize Image Within Table

html

css

image-resizing