在表格中動態調整圖像的大小

我想動態調整表格中的圖像大小，因爲瀏覽器的大小會改變分辨率。目前，如果瀏覽器變小，它會使其他列非常小/不切實際或完全切斷列。在表格中動態調整圖像的大小

這裏是我的表HTML/CSS的的jsfiddle：https://jsfiddle.net/zc2m9wq3/

我已經嘗試過類似的代碼：<img style="height:auto; width:auto; max-width:300px; max-height:300px;" src="...">我發現雖然是最大寬度和最大高度似乎並沒有工作。圖像只是達到其全分辨率。

如果有人能給我一些指導，我將不勝感激。如果需要，我也可以在這裏發佈我的HTML和CSS，而不僅僅是JSFiddle。謝謝。

來源

2015-06-19 RussNZ

我是正確認識？這種風格是否寬：100％; min-width：100px;'在img標籤上實現你要找的東西？你可以忽略高度風格 - 它應該按比例縮放。 – InbetweenWeekends

我試過了，它使圖像轉到全分辨率，就像超過1000x1000px – RussNZ

通常有兩種方法。

首先設置你的圖像大小％的

這樣。

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

你可以使用你想要什麼

感謝

來源

2015-06-19 01:31:50 HansolLim

圖例！謝謝你，第二種方式完美地工作，只是我以後的事情！ – RussNZ

在表格中動態調整圖像的大小

回答

相關問題