所以我需要我的代码让图像保持当前设置的纵横比，无论用户是否在较小的屏幕上查看网站，或者他们是否调整浏览器大小而不是全屏查看。
这是我到目前为止的一些代码，但我不确定在保持当前效果不变的情况下该怎么做(即图像并排并居中对齐)。
<style>
.first-image {
display:inline-block;
text-align:left;
}
.second-image {
display:inline-block;
text-align:right;
}
<body>
<center>
<div class="first-image">
<a href="index.html"><img src="img/leftbryce.png" onmouseover="this.src='img/whiteleftbryce.png'" onmouseout="this.src='img/leftbryce.png'" width="800 px" height="auto"></a>
</div>
<div class="second-image">
<img src="img/whiterightbryce.png" onmouseover="this.src='img/rightbryce.png'" onmouseout="this.src='img/whiterightbryce.png'" width="800 px" height="auto">
</div>
</center>
最佳答案
检查此链接以获取演示:- http://codepen.io/JDabhi/pen/aJNqwa
CSS
img{
max-width: 100%;
}
center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.first-image {
display:inline-block;
text-align:left;
}
.second-image {
display:inline-block;
text-align:right;
}
关于html - 调整浏览器大小时保持宽高比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42572345/