gpt4 book ai didi

html - 如何为不同的屏幕调整绝对定位图像的大小?

转载 作者:行者123 更新时间:2023-11-28 01:43:07 25 4
gpt4 key购买 nike

我有一个 float 横幅,我想显示超过大屏幕宽度的 50% 和小屏幕(移动设备)宽度的 100%。它必须位于屏幕底部,而不是内容底部。

图像有时非常小(我认为在视网膜显示器上)。

如何改进我的代码以在 Retina 显示器、大屏幕和小型移动设备屏幕上正确显示?

在 .css 中

.banner-sticky {
bottom: -2.5px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
}

.advert-img {
width: 50%
height: auto;
}
@media screen and (max-width: 380px) and (orientation: portrait) {
.advert-img {
width: 100%;
}
}

在 .html 文件中

<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<div id="sticky" class="banner-sticky" style="position: fixed;">
<a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a>
</div>


'<a id="ad-link" href=' + this.landingUrl + ' ><span id="banner-ad"><img src=' + this.imgSrc + ' class="advert-img" /></a>'

最佳答案

使用媒体查询

对于视网膜你可以使用@media screen and (min-resolution: 2dppx)

对于您似乎已经在使用的屏幕尺寸。您可以使用 min-width

而不是 max-width

如果您希望图像源根据屏幕尺寸而不同,您可以使用 srcset 属性。你可以在这里看到它的支持 http://caniuse.com/srcset

如果你想要一个响应式页面,你应该首先考虑 css 移动。首先为小屏幕创建默认样式,然后为大屏幕添加查询。

关于html - 如何为不同的屏幕调整绝对定位图像的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24573826/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com