最小高度，不同圖像方向上的最小寬度以填充div

在bigcartel帳戶中，我在循環中運行的div中有一個圖像。該HTML格式基本上是這樣的：最小高度，不同圖像方向上的最小寬度以填充div

<ul> 
    <li class="product"> 
    <a href="..."> 
    <img /> 
    <div class="product_info"></div> 
    </a> 
    </li> 
</ul>

CSS有一堆的預置碼，但我加入它這在端部覆蓋它：

.product, .product img { 
    max-width:210px; 
} 
.product{ 
    height:210px; 
    overflow:hidden; 
} 
.product img{ 
    min-width:210px; 
    min-height:210px; 
}

它與肖像定向圖像顯示很好溢出隱藏，但與橫向導向的圖像它擠壓寬度。我可以添加另一個屬性，使其不會水平擠壓？

我試圖通過一個有條件的CSS運行它，但Bigcartel似乎並沒有運行它。 URL是http://atwatertest.bigcartel.com

來源

2012-12-09 user1299248

是否可以在圖像標籤上設置寬度/高度？或添加了像「風景」或「肖像」的任何額外的CSS類？ – cimmanon

從第一條規則，你有'最大寬度：210px'，從最後你有'最小寬度：210px'。這將轉換爲「width：210px」，因爲它不能大於也不能小於這個寬度。你需要重新思考你想調整大小的邏輯..（*試着解釋你想發生什麼，所以我們可以建議解決方案*） –

您max/min-height和width:auto設置max-width或min-width，加height: auto，同樣任何時候。這將告訴CSS引擎按比例調整圖像大小。

來源

2012-12-09 23:56:15 Blazemonger

找出你想要圖像的高度需要多少百分比的屏幕。然後使用vh屬性。示例如果您希望圖像的高度在任意給定點處佔屏幕高度的1％，請使用1vh。

img { 
height: 1vh; 
width: 1vh; 
}

這意味着圖像總是會佔用1％的屏幕。這使得它相應地調整大小。

來源

2018-03-02 08:17:14

最小高度，不同圖像方向上的最小寬度以填充div

回答

相關問題