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

如何防止div的寬度超出百分比和像素？換句話說，瀏覽器應該計算百分比的像素值，然後選擇兩個值中較低的一個。如何設置最大寬度爲百分比AND像素？

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

2015-05-28 Joe Morano

@ dwreck08我想，但我會驚訝，如果這不能用純CSS完成。 –

@ Juhana的答案是正確的路要走，但如果你真的需要最大寬度，你可以使用媒體查詢 –

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

它將寬度設置爲20％，但將其設爲100 px。

來源

2015-05-28 19:20:08 JJJ

+13

-1，這並不回答實際問題。我想它在OP的情況下工作，但問題是：在這個答案中_percent_中的'max-width'在哪裏？相反，答案只是定義了一個「寬度」，這是不同的。 – Zelphir

@ Zelphir我不太瞭解你的評論; OP特別希望將寬度設置爲20％或100px，以較小者爲準，而這恰好就是這樣。 – JJJ

這與設置兩個最大值並選擇最小值不同。如果內容沒有填充_parent_的'20％'，您仍然會將_element_設置爲'20％'寬，而這可能不是必需的或不需要的。如果你有'px'和'％'的最大寬度，你不會有這種行爲。 – Zelphir

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

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

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

經過最新的Chrome，Firefox和IE測試。做到這一點

來源

2016-10-26 21:53:19 Kiaurutis

一種方法是簡單地使用兩個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>

來源

2016-12-02 20:20:03

我有這需要一個類似的解決方案的特定問題。我需要以原始大小顯示所有圖像（與寬高比，位置或額外的HTML標記無關），最大爲設置的最大寬度（以像素爲單位）。如果屏幕比這個固定的尺寸小，它應該縮小以適應。即設置width不符合要求。

要擴大@Kiaurutis的回答：

img { 
    max-width: 400px; 
} 

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

工作示例可以在這裏看到：https://jsfiddle.net/vrehxmpx/。在這個例子中，圖像大於400px（總是縮小），圖像小於閾值（當屏幕小於圖像時只縮小）。

要調整圖像邊緣，邊框和其他東西，只需增加@media的max-width即可。

來源

2017-07-11 17:40:11 Druckles

我在我的網站上有相同的寬度「換頁」。我希望默認寬度爲95％，但不超過1280像素。這是我怎麼用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;}}

來源

2018-03-01 16:42:17

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

回答

相關問題