vue项目使用vw布局及注意点（IOS上图片不显示bug）

最新推荐文章于 2024-04-28 18:05:27 发布

原创最新推荐文章于 2024-04-28 18:05:27 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios图片不显示

vue 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了在iOS设备上使用img标签时遇到的图片显示问题，并提供了解决方案。指出不可直接为img标签设置CSS样式，而应在父级元素上设置样式，同时通过百分比定义img的大小。此外，提供了正确的代码示例，帮助开发者避免类似问题。

注意事项

在ios端img标签的图片不显示,安卓可正常显示
解决方案: 不可以为img设置任何css样式，只可以在为img的父盒子设置样式，img的大小靠百分比设置。
代码示例：

错误示例
<div class="img">
    <img src="xxx.png" alt="">
</div>
<style>
    .img{
        width:100px;
        height:100px;
    }
    .img img{
        width:100px;
        height:100px;
        margin:10px;
    }
</style>


正确示例:在img上定义图片的大小，在ios端才可以正常显示
<div class="img">
    <img src="xxx.png" alt="" width="100%">
</div>
<style>
    .img{
        width:100px;
        height:100px;
        padding:10px;
    }
</style>

错误更正，在全局设置中img标签设置如下: