调整浏览器大小时保持纵横比答案

【问题标题】：Maintain aspect ratio when resizing browser调整浏览器大小时保持纵横比
【发布时间】：2017-03-03 14:56:44
【问题描述】：

所以我需要我的代码让图像保持当前设置的纵横比，无论用户是在较小的屏幕上查看网站还是调整浏览器的大小而不是全屏查看。

这是我目前拥有的一些代码，但我只是不确定在保持当前效果不变的情况下该怎么做（即图像并排并在中心对齐）。

<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>

【问题讨论】：

标签： html css

【解决方案1】：

查看此链接以查看演示：- 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;
}

【讨论】：

我怎样才能保持图像在中心对齐？有没有办法让它们填满屏幕？
居中对齐父 div 或图像我不明白吗？
我需要两个图像在中心对齐

【解决方案2】：

将所有图像包装在一个 div 中，然后将图像宽度设置为百分比而不是像素大小。

【讨论】：

【解决方案3】：

为您的 div 指定宽度，图像宽度应始终为 100%。

<style type="text/css">
div{max-width:400px;}
img{max-width:100%;}
</style>

<div class="first-image">
    <a href="index.html"><img src="http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg" onmouseover="http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'" onmouseout="this.src='http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'"></a>
</div>

<div class="second-image">
    <img src="http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg" onmouseover="this.src='http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'" onmouseout="this.src='http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'">
</div>

【讨论】：