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

我试图在我的网页的右下角添加一个固定元素，这是我成功完成的。定位有限高度（最大高度）的固定元素

我也限制了它的宽度与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％; } –

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

回答

相关问题