html - img 不会在窗口收缩时调整大小

Question

我有以下 HTML 和 CSS 代码并排设置两张图片，当页面缩小时应该缩小，但这不起作用。

我去掉了父 div 上的所有类，但仍然没有...

知道为什么当浏览器窗口缩小时图片不会缩小吗？

谢谢

.align {
    position: absolute;
    top: 75px;
    z-index: -100;
}
.navigate {
    margin: -10px 888px;
    width: 200px;
    z-index: 100;
}
.leftSide {
    height: 558px;
    margin: 20px 0px 0px 344px;
    max-width: 500px;
}
.rightSide {
    height: 558px;
    margin: -5px 0px 0px 1053px;
    max-width: 500px;
}
.verticalLine {
    width: 1px;
    background-color: red;
    height: 558px;
    margin: -557px 940px;
}
img {
    width: 70%;
    height: auto;
}

<div class="align">
    <div class="navigate">	<a id="prevPic" href="#">&lt;&lt; Prev</a>
	<a id="nextPic" href="#">Next&gt;&gt;</a>

    </div>
    <div class="leftSide">
        <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
    </div>
    <div class="verticalLine"></div>
    <div class="rightSide">
        <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
    </div>
</div>

Answer 1

.align {
	margin-left:auto;
	margin-right:auto;
	
}
.container{
	width:90%;
	height:568px;
	display:inline-block;
	}
.navigate {
	width: 100%;
	text-align:center;
	padding:20px;
}
.leftSide {
	margin:0;
	height: auto;
	max-height:100%;
	width:49%;
	text-align:center;
	display:inline-block;
}
.rightSide {
	margin:0;
	height: auto;
	max-height:100%;
	width:49%;
	text-align:center;
	display:inline-block;
}
.verticalLine {
	width: 1px;
	background-color: red;
	height: 558px;
	display:inline-block;
	
}
.leftSide img {
	width:auto;
	max-width:100%;

}
.rightSide img {
	width:auto;
	max-width:100%;

}

<div class="align">
<div class="container">
  <div class="navigate"> <a id="prevPic" href="#">&lt;&lt; Prev</a> <a id="nextPic" href="#">Next&gt;&gt;</a> </div>
  <div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
  <div class="verticalLine"></div>
  <div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>