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

【问题标题】：Why does the image leave the margins of its parent container when I increase the width?当我增加宽度时，为什么图像会离开其父容器的边距？
【发布时间】：2022-01-23 20:28:37
【问题描述】：

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

absolute positioning

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

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%;
   
}

【问题讨论】：

标签： html css flexbox positioning

【解决方案1】：

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

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

【讨论】：