html - 调整浏览器大小时保持宽高比-6ren

html - 调整浏览器大小时保持宽高比

转载作者：行者123 更新时间：2023-11-28 04:13:54

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

这是我到目前为止的一些代码，但我不确定在保持当前效果不变的情况下该怎么做(即图像并排并居中对齐)。

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