如何設置最大寬度百分比和像素？

Question

如何防止div的寬度擴展超過百分比和像素？ 換句話說，瀏覽器應計算百分比的像素值，然后選擇兩個值中的較低者。

如果我將它們設置為這樣： {max-width:100px;max-width:20%;}資產管道只選擇第二個並忽略第一個。

Answer 1

width:20%;
max-width:100px;

這將寬度設置為20％，但將其設置為100 px。

Answer 2

實現此目的的一種方法是簡單地使用兩個div

<div class="outer">
  <div class="inner">
    This content will not exceed 100px or 20% width.
  </div>
</div>

<style>
.outer {
  max-width: 90%;
}
.inner {
  max-width: 100px;
}
</style>

Answer 3

這不適用於不同的圖像尺寸/寬高比。 如果您知道圖像的大小，則可以分別定義最大寬度和最大高度 。 將此方法用於特定圖像組，但不作為一般規則。

實際示例：手機中有5張照片放在一個頁面中，您需要在屏幕的另一半顯示一些文字。 您將圖像的大小減小到500px寬和300px高。 您希望它們不超過屏幕的一半，而不是平板電腦上的250px。 計算最大高度：250 * 300/500 = 150px。

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    }
}

測試了最新的Chrome，Firefox和IE。

Answer 4

我遇到了一個需要類似解決方案的特定問題。 我需要以原始大小顯示所有圖像（獨立於寬高比，位置或額外的HTML標記），最大為設置的最大寬度（以像素為單位）。 如果屏幕小於此固定尺寸，則應縮小以適合。 即設置width不符合要求。

要擴展@Kiaurutis的答案：

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

這里可以看到一個工作示例： https ： //jsfiddle.net/vrehxmpx/ 。 在此示例中，存在大於400px的圖像（總是按比例縮小）和小於閾值的圖像（僅在屏幕小於圖像時按比例縮小）。

要調整邊距，邊框和圖像上可能包含的其他內容，只需增加@media的max-width 。

Answer 5

我的網站上有相同寬度的“頁面換行”。 我希望它默認為95％寬度但不超過1280px。 這是我用CSS制作它的方式

.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}

Answer 6

不要這樣做。

我相信所選擇的答案對於OP描述的場景是正確的。 但是，有些評論認為OP要求將max-width屬性設置為兩個值中的較低值，而不是width 。 這也可以，請看下面。

注意：這個解決方案對我來說沒有多大意義。 請使用所選答案，它正確演示了最大寬度。 下面的代碼將確保max-width屬性是20％或100px中的較小者。

img {
    max-width: 20%;
}

@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
    img {
        max-width: 100px;
    }
}