Bei der Größenanpassung des Browsers das Seitenverhältnis beibehalten

Also brauchte ich meinen Code, damit die Bilder das aktuelle Seitenverhältnis beibehalten, unabhängig davon, ob der Benutzer die Site auf einem kleineren Bildschirm anzeigt oder die Größe des Browsers ändert Anzeige im Vollbildmodus.Bei der Größenanpassung des Browsers das Seitenverhältnis beibehalten

Hier ist ein Code, den ich bisher habe, aber ich bin nur unsicher, was zu tun ist, während ich die aktuellen Effekte intakt halte (die Bilder sind nebeneinander und in der Mitte ausgerichtet).

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

Quelle

2017-03-03 unowncoder

Prüfung Link für Demo: - 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; 
}

Quelle

2017-03-03 06:53:18

Wie kann ich die in dem Zentrum ausgerichteten Bilder? Und gibt es eine Möglichkeit, sie den Bildschirm zu füllen? – unowncoder

Center Align Eltern Div oder Bild ich verstehe dich nicht? –

Ich brauche beide Bilder in der Mitte zu zentrieren – unowncoder

Wrap alle Ihre Bilder in einem div, stellen Sie dann die Bildbreite in Prozent eher als eine Pixelgröße.

Quelle

2017-03-03 06:52:09 Stuart

geben die Breite auf Ihre div und Bildbreite sollte immer 100% sein.

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

Quelle

2017-03-03 06:56:44 sayyednoman

Bei der Größenanpassung des Browsers das Seitenverhältnis beibehalten

Antwort

Verwandte Themen