css 图像未显示在移动设备上

rvpgvaaj 于 2022-12-01 发布在其他

关注(0)|答案(5)|浏览(165)

该图像不会出现在移动浏览器中。它确实会出现在普通浏览器（PC）或Inspect元素（移动视图）上，但不会出现在真正的手机上。
于飞：

<div class="image_wrap">
        <img src="img/about/600x600.jpg" alt="" />
        <div class="main" data-img-url="img/about/1.jpg"></div>
</div>

CSS：

.tomer_tm_hero_header_wrap .image_wrap{
    width: 200px;
    height: 200px;
    display: inline-block;
    margin-bottom: 38px;
    position: relative;
}
    .tomer_tm_hero_header_wrap .image_wrap .main{
        position: absolute;
        top: 8px;
        bottom: -8px;
        left: 8px;
        right: -8px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 100%;
    }
    .tomer_tm_hero_header_wrap .image_wrap img{
        min-width: 100%;
        border-radius: 100%;
        border: 8px solid rgb(227, 135, 45);
    }

css

来源：https://stackoverflow.com/questions/58261378/image-not-showing-up-on-mobile-devices

5条答案

按热度按时间

ubby3x7f1#

你为什么不换个说法：

<div class="main" data-img-url="img/about/1.jpg"></div>

与：

<img class="main" src="img/about/1.jpg" alt="me" />

不要忘记将position: relative添加到.image_wrap类中，这样您的.main就可以完全依赖于父元素，而不是整个页面。

赞(0）回复(0）举报 2022-12-01

34gzjxbg2#

这是对Marco Escaleira提供的答案的补充。
我不知道你想用一个div和一个data-img-url来达到什么目的？你是用JS把div替换成一个有效的html元素吗？如果你是，我们需要看到呈现的html。如果不是，请看下面的答案。
我认为这样做的唯一原因是为了处理响应图像问题或有一个可以正确定位的背景图像。这两种情况都更好地服务于更清晰的语义HTML，它们将变得可访问。

1：响应图像使用

在这种情况下，您可以使用picture标记和图像源集。这将允许您根据每个设备所需的大小交换图像，并为您提供一个可以定位的新元素。这样做的好处是您可以获得一个工作后备，并可以使用webp和jpg / png来增强性能。

2：需要一个新元素来定位

在这种情况下，我建议使用sudo选择器，如::after或:: before。然后，您可以使用css将图像作为背景注入，并将其放置在您喜欢的位置。这将解决一个可访问性问题，因为图像（我假设仅用于演示）将不再被辅助设备拾取。
要了解更多信息，我建议看https://css-tricks.com/responsive-images-css/。这是一个很好的响应图像纲要。

赞(0）回复(0）举报 2022-12-01

mxg2im7a3#

请尝试在css中使用.tomer_tm_hero_header_wrap .image_wrap .main，而不要使用data-img-url

赞(0）回复(0）举报 2022-12-01

a0x5cqrl4#

不知道是什么问题，但是当我tomer.info在两个不同的设备（iPhone XR和Galaxy S9）上访问你的网站www.example.com时，你的图像显示出来了。当我进入你的小提琴页面时，它没有......但是我注意到你的小提琴上有一些指向SVG的CSS，我在你的HMTL中没有看到，这可能会扰乱你的一些风格。只是提醒一下。

赞(0）回复(0）举报 2022-12-01

cclgggtu5#

你不使用媒体查询为您的网站是响应？如果没有，你应该使用他们肯定.否则，如果你使用他们，那么你做了一些错误的里面，但我必须看到媒体查询，以帮助.

赞(0）回复(0）举报 2022-12-01