在调整浏览器大小时保持长宽比

因此，我需要我的代码让图像保持当前设置的宽高比，而不管用户是在小屏幕上查看网站，还是调整浏览器大小而不是全屏查看。在调整浏览器大小时保持长宽比

这是我迄今为止的一些代码，但我只是不确定该怎么做，同时仍然保持当前效果不变（即图像并排排列并居中）。

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

来源

2017-03-03 unowncoder

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

来源

2017-03-03 06:53:18

我怎么可能保持中心对齐，虽然图像？有没有办法让他们填满屏幕？ – unowncoder

中心对齐父母div或图像我不明白吗？ –

我需要两个图像在中心对齐 – unowncoder

在一个div包裹所有的图像，然后将图像宽度的百分比，而不是一个像素大小。

来源

2017-03-03 06:52:09 Stuart

给宽度的股利和图像宽度应始终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>

来源

2017-03-03 06:56:44 sayyednoman

在调整浏览器大小时保持长宽比

回答

相关问题