定位有限高度（最大高度）的固定元素

我試圖在我的網頁的右下角添加一個固定元素，這是我成功完成的。定位有限高度（最大高度）的固定元素

我也限制了它的寬度與max-width: 30%;所以在移動設備上不顯示圖像太大。我現在想要做的是通過屏幕高度來調整圖像。除了媒體查詢之外，還有什麼可以解決的嗎？

HTML：

<div id="cornerImg"> 
    <a href="my-site-link-here"> 
     <img src="image/source.jpg" /> 
    </a> 
</div>

CSS：

#cornerImg { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    max-width: 30%; /* Already working as expected */ 
    max-height: 30%; /* Adjusts the visible part of the image, but overflowing */ 
}

所以我得到調整屏幕上的圖像，但它實際上並沒有改變圖像的大小，當它在max-height條件下。它只顯示圖像的頂部，並使圖像的其餘部分不可見。

我知道如何將它作爲媒體查詢，但我在這裏尋找非MQ解決方案，如果它有可能以任何形式。 預先感謝您！

編輯：如果有媒體查詢解決方案出現，請提供一些建議。看起來，儘管我可以通過最大高度調整圖像的高度，但它仍然會從屏幕溢出圖像，所以在這方面也沒有運氣。

來源

2016-02-10 ProDexorite

你試過'#cornerImg IMG {最大寬度：100％;身高：自動; }'？你能提供一個小提琴嗎？ – fcalderan

它不會改變高度，因爲您沒有指定方式。 '最大高度：300像素;高度：30％;'將高度限制爲300px或30％（當30％小於300px時） – kecer

剛剛嘗試過，但沒有成功。我不一定提供小提琴或頁面本身，儘管它是公開的，但我不得不要求客戶許可。我會試着用圖像來說明它，堅持下去。 – ProDexorite

div { 
    width: 100%; 
    height: 400px; 
    background-image: url('img_flowers.jpg'); 
    background-size: cover; 
    border: 1px solid red; 
}

你可以試試這個

來源

2016-02-10 10:47:42

在這種情況下，我將不得不努力使它成爲另一個網站的可點擊鏈接，所以我寧願將其保留爲實際圖像而不用於背景圖像。謝謝你的回答，但很感激！ – ProDexorite

.img響應類將max-width：100％，height：auto和display：block應用於圖像：示例 Cinque Terre –

.responsive-image {height：auto; 寬度：100％; } –

定位有限高度（最大高度）的固定元素

回答

相關問題