Centering und responsive imageslider clean solution pls

Nach vielen Stunden der Frustration habe ich mich entschieden, Sie einfach zu fragen; Ich habe einen Fotoslider mit JQuery gemacht, der in diesem Fall als Bild angezeigt wird. Normalerweise ist es ein div. Ich möchte das Div skalieren und sowohl vertikal als auch horizontal zentrieren. Jetzt, da das Bild eine Breite und Höhe hat (wie alle Bilder haben), kann ich es nicht wie das Div machen, da es unterschiedliche Maße hat. Ich möchte nicht, das Bild als die div sowohl in Breite und Höhe größer sein, aber ich tue das Bild will mit dem div maßstab wird gezeigt in.Centering und responsive imageslider clean solution pls

Bitte helfen und Dank im Voraus,

HTML

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <title>name</title> 

      <link rel="stylesheet" href="css/style.css"> 
      <link rel="stylesheet" href="css/reset.css"> 

     </head> 
     <body> 
       <header> 
        <mark><h1>NAME</h1></mark> 
        <h2>WEBSITE</h2> 
       </header> 

       <section id="upperContainer"><article id="leftBlock"></article><article id="rightBlock"><div id="photoPluginHolder"><img id="photoHolder" src="images/huis1.png"></div></div></article> 
       </section> 


       <section id="lowerContainer"><article id="leftBlock2"></article><article id="rightBlock2"></article></section> 

       <section id="about"></section> 
       <footer></footer> 
     </body> 
    </html>

CSS

body 
    { 
     background-color: black; 
     max-width: 100%; 
     height: 100%; 
    } 

    @font-face 
    { 
     font-family: fontje; 
     src: url(../fonts/tunga.ttf); 
    } 

    header 
    { 
     width: 100%; 
     height: 15vh; 
     max-height: 8vw; 
     /*background-image: url(../images/profile.png);*/ 
     background-color: white; 
    } 

    h1 
    { 
     font-family: fontje; 
     font-size: 5vw; 
     max-height: 5vw; 
     line-height: 1; 
     color: #333333; 
    } 

    h2 
    { 
     font-family: fontje; 
     font-size: 2vw; 
     max-height: 2vw; 
     line-height: 0.1; 
     color: #333333; 
    } 

    #upperContainer 
    { 
     width: 100%; 
     max-width: 100%; 
     height: 60vh; 
     background-color: brown; 
     text-align: center; 
    } 

    #leftBlock 
    { 
     width: 50%; 
     height: 60vh; 
     max-height: 60vh; 
     background-color: orange; 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #rightBlock 
    { 
     width: 50%; 
     height: 60vh; 
     max-height: 60vh; 
     background-color: blue; 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #lowerContainer 
    { 
     width: 100%; 
     max-width: 100vw; 
     max-height: 60vh; 
     background-color: brown; 
     text-align: center; 
    } 

    #leftBlock2 
    { 
     width: 50%; 
     height: 60vh; 
     max-height: 60vh; 
     background-color: purple; 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #rightBlock2 
    { 
     width: 50%; 
     height: 60vh; 
     max-height: 60vh; 
     background-color: green; 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #about 
    { 
     width: 100%; 
     height: 90vh; 
     background-color: pink; 
    } 

    footer 
    { 
     width: 100%; 
     height: 15vh; 
     background-color: white; 
    } 

    /*photogeval*/ 
    #photoPluginHolder 
    { 

    } 

    #photoHolder 
    { 


    } 

    #photoHolder > img 
    { 

     width: 92%; 
     max-width: 100%; 
     max-height: 100%; 
     display: table; 
    } 


    #arrowLeftHolder 
    { 

    } 

    #arrowLeft 
    { 



    } 

    #arrowRightHolder 
    { 


    } 

    #arrowRight 
    { 

    } 

    #arrowLeft:hover 
    { 
     cursor: pointer; 
    } 

    #arrowRight:hover 
    { 
     cursor: pointer; 
    } 

    #arrowLeftHolder:hover 
    { 
     background-color: rgba(0, 0, 0, 0.225); 
     cursor: pointer; 
    } 

    #arrowRightHolder:hover 
    { 
     background-color: rgba(0, 0, 0, 0.225); 
     cursor: pointer; 
    }

Quelle

2016-05-21 blabla

ersetzen

#photoPluginHolder 
{ 

} 

#photoHolder 
{ 


} 

#photoHolder > img 
{ 

    width: 92%; 
    max-width: 100%; 
    max-height: 100%; 
    display: table; 
}

mit:

#photoPluginHolder 
{ 
    width:100%; 
    height:100%; 
    text-align:center; 
} 

#photoPluginHolder:before { 
    content: ''; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 


#photoHolder 
{ 
    max-width: 100%; 
    max-height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
}

Quelle

2016-05-21 21:55:34 sboo

Leider tut dies nicht funktionieren .. der PhotoHolder-Inhalt nicht vertikal zentriert in dem Elternelement – blabla

Sie haben Recht- Ich bearbeitet/repariert die CSS und es sollte jetzt funktionieren. Beachten Sie die verschiedenen IDs. Ich habe ein unsichtbares Pseudo-Element hinzugefügt, das die gesamte Höhe des Containers einnimmt, damit das Bild vertikal korrekt ausgerichtet werden kann. – sboo

Vielen Dank für die Hilfe .. wird später auschecken, wenn das total funktioniert .. aber trotzdem danke .. wenn es funktioniert (ich nehme an, es tut) werde ich Ihre als theanswer zu dieser Frage natürlich nehmen. – blabla

Hallo :) Haben Sie Ihre erneuerte Lösung noch nicht ausprobiert, aber ...... diese als gut zu funktionieren scheint:

#elementId 
{ 
position: relative; 
max-width: 100%; 
height: 60vh; 
z-index: 3; 
background-image: url(../images/ellax4.png); 
background-repeat: no-repeat; 
background-size: 100%; 
background-position: center center; 
}

Quelle

2016-05-25 19:19:27 blabla

Centering und responsive imageslider clean solution pls

Antwort

Verwandte Themen