在調整瀏覽器大小時保持長寬比

因此，我需要我的代碼讓圖像保持當前設置的寬高比，而不管用戶是在小屏幕上查看網站，還是調整瀏覽器大小而不是全屏查看。在調整瀏覽器大小時保持長寬比

這是我迄今爲止的一些代碼，但我只是不確定該怎麼做，同時仍然保持當前效果不變（即圖像並排排列並居中）。

<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

在調整瀏覽器大小時保持長寬比

回答

相關問題