Question

你知道为什么图片不会在浏览器调整大小时放大/缩小，尽管max-width:100%和height:auto？非常感谢

#content-wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.atelier-beaute {
    position: relative;
    float: right;
    z-index: 14;
    width: 58.5%;
    margin-top: 50px;
    padding-right: 90px;
    line-height: 1.38;
    text-align: justify;
    color: rgb(71, 64, 50);
}
.presentation img {
    display: block;
    float: left;
    margin-top: 170px;
    margin-left: 10%;
    overflow: hidden;
    max-width:100%;
    height:auto;
}
.presentation-1 {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 60px;
    background-color: #ffffff;
}

Answer 1

使用width:100%;代替max-width:100%;

请参阅：CSS: Width and Max-Width

以下更新的代码：

＆＃13;

#content-wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.atelier-beaute {
    position: relative;
    float: right;
    z-index: 14;
    width: 58.5%;
    margin-top: 50px;
    padding-right: 90px;
    line-height: 1.38;
    text-align: justify;
    color: rgb(71, 64, 50);
}
.presentation img {
    display: block;
    float: left;
    margin-top: 170px;
    margin-left: 10%;
    overflow: hidden;
    width:100%;
    height:auto;
}
.presentation-1 {
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 60px;
    background-color: #ffffff;
}

＆＃13;

<div id="content-wrapper">
    <section class="presentation presentation-1 clearfix">
        <img src="http://lorempixel.com/200/200/sports/" />
        <article class="atelier-beaute wow fadeInRight">
            <h1>L'atelier <b>beauté</b></h1>
            
            <h2>Un moment, un instant, rien que pour soi...</h2>
            
            <br/>
            <p>Venez vous ressourcez dans un cadre chaleureux et reposant où les bienfaits des plantes et huiles essentielles viendront délicatement parfumer ce moment d'évasion...</p>
            <p>Aurélie Caucheteux, esthéticienne et pédicure médicale diplômée de l'école privée MOTTARD à Namur vous prodiguera dans la bonne humeur, la relaxation et le bien-être, des soins de qualité à la hauteur de vos envies et de vos espérances.</p>
            <p>L'accueil, l'ambiance et la qualité des services que vous propose aurélie sont sa priorité. Tout est étudié et conçu pour votre bien-être et satisfaction.</p>
        </article>
    </section>
</div>

＆＃13;

Answer 2

我查看了你的代码，我认为问题是你在.presentation img中指定max-width应该是100％。相反，您应该尝试更改为简单宽度：100％

希望这有帮助！

基于浏览器大小不起作用的图像比例

2 个答案: