为什么当我增加宽度时图像会离开其父容器的边距？

Question

我花了一些时间尝试解决这个问题，但没有成功。我正在尝试将文本元素与图像对齐，如下图所示。我能够通过绝对定位做到这一点。

absolute positioning

但是我也希望我的页面能够响应，所以我决定使用弹性框容器将文本元素和图像元素并排放置，并在调整 window 大小时获得相等的距离。但是，当我增加图像的大小时，内容区域只会忽略其填充边距和父容器。它在 window 宽度和纯白色背景上创建一个滚动。

responsive image

很想听听人们认为我做错了什么。还想听听人们会用什么其他方式来创造我想要的效果。

下面是我的代码

<body>
    <header>
        <div class="container">
            <div class="justify">
                 <div class="inline">
                 <h1>App name</h1>
                 <h2>Download on the app store!</h2>
                 <a href="https://www.apple.com/uk/app-store/" target="_blank"><img class="downloadimg" src="appstore.png" alt="download link">
                </a>
                </div>
                <div class="inline">
                <img class="werewolf" src="werewolf.png" alt="app logo">
                </div>
            </div>
        </div>
    </header>
</body>
</html>

CSS code:

body{
    margin: 0px;
    padding: 0px;
    font-family: 'Bebas Neue', cursive;
}
header{
    background-color: aqua;
    font-size: 40px;
    padding-left: 10%;
    padding-top: 10%;
    padding-bottom:10%;
    border-style: dashed;
    border-color: rgb(255, 0, 0);

}
.justify{
    display: flex;
    align-items: center;
    justify-content: space-between;
   
}
.downloadimg{
    width: 50%;
}
.inline{
    border-style: dashed;
    border-color: rgb(255, 0, 0);
    
}
.werewolf{  
    width: 140%;
   
}

Answer 1

尝试将此添加到您的图片中 css 规则：

    image.werewolf {
        display: block; /* or inline-block */
        max-width: 100%;
        height: auto; /* to maintain aspect ratio */
    }

为什么当我增加宽度时图像会离开其父容器的边距？

Why does the image leave the margins of its parent container when I increase the width?

html

css

flexbox

positioning