css - Safari 图片宽度变化

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 Changes 需要修复代码

.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%，我们不需要它