图像忽略加载时的最大宽度，但在切换最大宽度或调整窗口大小后接受它

Question

我里面有一些div和一个图像，而且css按照我想要的方式工作（差不多），除了当我刷新页面或第一次加载它时，图像宽度占用整个div宽度，忽略css属性。它仅在窗口调整大小时注意到css属性（例如，通过1px），或者如果在谷歌开发人员工具中，我切换最大宽度然后重新打开，或者如果我关闭父div显示然后重新打开。

您可以看到我刚拍摄的视频中的情况： https://youtu.be/YLx4NjKuzMo

请记住，此问题发生在大约880px宽度之后。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  width: 100%;
}
header {
  height: 15vh;
  min-height: 80px;
  background-color: #262626;
}
h2 {
  font-size: 3vw;
  color: #f60;
}
ul {
  line-height: 3.5vw;
}
.white-text {
  color: #fff;
}
.orange-text {
  color: #f60;
}
.page-container {
  width: 100%;
  height: 85vh;
  min-height: 460px;
  display: flex;
  justify-content: space-between;
  font-size: 2vw;
  position: relative;
}
#logo {
  position: relative;
  height: 100%;
  padding: 3vh;
}
.landing-section {
  width: 33.3%;
  height: 100%;
  padding: 4vw;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#employees {
  background-color: #fff;
}
#employers {
  background-color: #fff;
}
.values-list {
  margin-left: 7vw;
  margin-top: 2vw;
}
.rounded {
  border-radius: 100%;
}
.div-call-to-action {
  width: 100%;
  height: 15vw;
  display: flex;
  justify-content: space-between;
}
.landing-icon {
  width: 15vw;
  height: 15vw;
}
.p-see-how {
  margin: auto 0;
  color: #f60;
}
.arrow-icon {
  margin: auto 1.5vw;
  min-width: 45px;
  min-height: 45px;
  width: 4vw;
  height: 4vw;
  background-size: contain;
  background-color: #f60 /*in case image doesn't load*/;
  border-radius: 5px;
}
.arrow-icon:active {
  background-color: #fff /*in case image doesn't load*/;
  border: 1px solid #f60;
}
.is-flex {
  display: flex;
}
/*@media (max-width: 1000px) and (max-height: 1000px)
	#logo
		width 320px
		height initial
		padding 0*/
#img-screen-chat-top-parent {
  width: 33.3%;
  padding: 2.5%;
}
#img-screen-chat-btm-parent {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#img-screen-chat {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<header>
            <img id="logo" src="http://via.placeholder.com/350x150" alt="ratedby">
        </header>
        <section class="page-container">
            <section class="landing-section" id="employees">
                <div class="div-why">
                    <h2>Lorem ipsum</h2>
                    <ul class="values-list">
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                    </ul>
                </div>
                <div class="div-call-to-action">
                    <img class="rounded landing-icon" id="chef-icon" src="http://via.placeholder.com/150x150" alt="Looking for work?">
                    <div class="is-flex">
                        <p class="p-see-how">Lorem</p>
                        <div class="arrow-icon" id="arrow-employees"></div>
                    </div>
                </div>
            </section>
            <section id="img-screen-chat-top-parent">
                <div id="img-screen-chat-btm-parent">
                    <img id="img-screen-chat" alt="Mobile app screen" src="http://via.placeholder.com/729x1530">
                </div>
            </section>
            <section class="landing-section" id="employers">
                <div class="div-why">
                    <h2>Lorem ipsum</h2>
                    <ul class="values-list">
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                    </ul>
                </div>
                <div class="div-call-to-action">
                    <img class="rounded landing-icon" id="hire-icon" src="http://via.placeholder.com/150x150" alt="Looking for work?">
                    <div class="is-flex">
                        <p class="p-see-how">Lorem</p>
                        <div class="arrow-icon" id="arrow-employers"></div>
                    </div>
                </div>
            </section>
        </section>