我希望圖像佔用100％的寬度或高度（我猜想以較大者爲準）。有點像當你有一個照片查看器，並且在邊上或頂部有一個黑邊，取決於它的方式。

很明顯，如果它是一個非常小的圖像，我不希望它拉伸，我不希望任何圖像伸展，我只是希望他們儘可能多地填充窗口。

例如，當您在Google上加載圖片時，圖片不會顯示最充分的分辨率。如果它很大，它會縮小到適合頁面的邊界。然後你可以點擊它放大，如果你想。

我該如何做到這一點？謝謝。

2013-03-18 James Mitchell

這是很容易的用單獨CSS來完成：

.container img { 
    max-width: 100%; 
    height: auto; 
}

的max-width確保它不會超過它的容器的寬度的100％。 height通知瀏覽器正常調整圖像的大小（例如，它不會在寬度方向上擴展，但不在高度方向上），並且包含在舊版瀏覽器中。

如果您希望匹配容器的高度而不是寬度，您當然也可以將其取消。

編輯：

由於pburgess建議，如果你希望你的形象要匹配寬度或高度，您需要同時聲明。看到這個的jsfiddle：http://jsfiddle.net/XxgkG/

.container img { 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
}

注意這不會工作在IE6，是搖搖欲墜的IE7。如果你正在爲這些悲傷孤獨的瀏覽器編碼，你應該查看this answer。

來源

2013-03-18 21:02:48 Ian

IE6忽略最小寬度，最大高度和最大寬度，所以你會連擊使用寬度，而不是最大寬度。 – 2013-03-18 21:16:34

正確 - 但如果目標只是將寬度增加到圖像的最大自然尺寸，則無法單獨使用寬度來實現。如果你是爲IE 6編碼的話，你可能需要一個JS後備。這裏有一個IE6黑客的答案：http://stackoverflow.com/questions/9442521/how-to-make-css-max-width-in-ie6-and-7 – Ian 2013-03-18 21:18:01

看到這個：http：// jsfiddle。net/mohammadAdil/AtxYb/2/ 嘗試更改最大寬度和寬度並查看差異 – 2013-03-18 21:21:22

Demo Fiddle

img{height:auto;width:100%;}

嘗試重新調整大小的窗口 - 圖像將佔用的最大空間。

來源

2013-03-18 21:05:16

我不認爲這是海報想要的：「顯然，如果它是一個非常小的圖像，我不想讓它伸展，我不希望任何圖像伸展」。您的解決方案將圖像拉伸到原始尺寸的100％以上。 – CodePB 2013-03-18 21:29:57

一個很好的解決方案需要知道圖像尺寸並相應地調整CSS。也許一個jQuery的動作，以及一些CSS縮放可以做到這一點。 – 2013-03-18 21:37:51

我想到你居然會需要以下條件：

.container img { 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
}

這需要着手明確的高度的容器。

實施例：

http://jsfiddle.net/AtxYb/4/

來源

2013-03-18 21:05:19 CodePB

你的解決方案似乎不工作：http://jsfiddle.net/mohammadadil/AtxYb/1/ – 2013-03-18 21:13:00

@MohammadAdil我已經更新了我的答案，它需要一個明確的高度設置爲工作的容器 – CodePB 2013-03-18 21:28:09

我試過了，調整窗口大小 - 圖像仍然不能覆蓋整個寬度... – 2013-03-18 21:31:27

有圖像佔用儘可能多的窗口，沒有超出邊界

回答

Demo Fiddle

有圖像佔用儘可能多的窗口，沒有超出邊界

回答

Demo Fiddle

相關問題