Question

我目前将我的网站放在网上，但我在safari中的图像大小有问题，在我的CSS中，我把宽度放在那样：

img {
    width: 450%;
}

这是网站：

http://antoninmarchard.com/

我不明白为什么图像在chrome，mozilla中显示良好但在Safari中不显示..

Answer 1

你的代码不好，而且它现在在IE中看起来很好。我已经清理了html和css代码，您可以应用这些更改来修复您的问题：

HTML更改可让该特定部分的html变得简单：

<div class="inner-banner">
        <div class="left">                  
                <h1> Donnez vie à vos idées, créons ensemble. </h1>
                <button class="btn btn-custom-am" data-toggle="modal" data-target="#contact_modal"> Contactez-moi </button>
        </div>              
        <div class="right">                 
                <img src="src/img/banner-design.svg" alt="cube with smoke, smartphone and computer">
        </div>              
</div>

CSS更改需要修复代码

.banner .inner-banner{
    width: 100%;
    max-width: 100%;
    position: relative;
    min-height: 100vh;
}

.banner .inner-banner .left{
    width: 40%;
    float: left;
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    color: #ffffff;
}

.banner .inner-banner .right{
    width: 70%;
    float: right;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}

从图片中删除width:450%，我们不需要它

Safari图像宽度变化

1 个答案: