ブラウザのサイズを変更する際にアスペクト比を維持する

私は、ユーザーが小さい画面でサイトを表示しているかどうかにかかわらず、現在設定されている縦横比を維持するためにコードを必要としました。それをフルスクリーンで見る。ブラウザのサイズを変更する際にアスペクト比を維持する

これまでのコードはいくつかありますが、現在の効果を損なわずに（画像が左右に並んで中央に配置されている）、何をすべきか分かりません。

<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%する必要がありますあなたのdivや画像幅に幅を与えます。

<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

ブラウザのサイズを変更する際にアスペクト比を維持する

答えて

関連する問題