Responsive Verhalten auf einer Seite voller Höhe mit vert/horz zentriertem Inhalt nicht möglich

Question

Ich baue eine Fullheight-Site, wo ich den ersten Abschnitt benötigen, um vertikal und horizontal zentrierten Inhalt zu haben. Leider gibt es ein Bild als Teil des Deals, das Resopnesive nicht skalieren kann, wenn die Bildschirmgröße geändert wird. Wie gehe ich mit diesem Problem um, da es so aussieht, als hätte die Transformationsmethode die zentrierende Herausforderung gelöst. Am Anfang des ersten Abschnitts habe ich einen Header, der bei der Lösung berücksichtigt werden muss.

Fiddle: https://jsfiddle.net/yevr2tLm/1/

HTML

<section class="container-fluid"> 
    <header>This is a header</header> 
    <div class="content__1"> 
    <img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" /> 
    <p> 
     This is some awesome text 
    </p> 
    </div> 
</section> 

CSS

body, 
html { 
    height: 100%; 
} 

section { 
    position: relative; 
    min-height: 100%; 
    min-height: 100vh; 
} 

.content__1 { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

header { 
    top: 0; 
    position: absolute; 
    padding-top: 2em; 
} 

Answer 1

du mit Flexbox tun konnte. Wenn Sie jetzt flex-direction: column für ein Containerelement verwenden, haben Sie zwei Flex-Elemente: Header und Inhalt untereinander. Also, was Sie jetzt tun können, ist flex: 1 auf Inhalte verwenden, so dass es Rest Fensterhöhe stattfinden wird, die nach dem header gelassen wird und man bekommt so etwas wie dieses

Jetzt müssen Sie vertikal und horizontal Mitte Inhalt in content__1 Element und Sie können dies tun, wenn Sie display: flex auf content__1 auch verwenden und dann fügen Sie einfach und justify-content: center hinzu. Und um img responsive zu halten, können Sie etwas wie width: 60% und height: auto verwenden, aber Sie können das je nach Bildgröße anpassen.

* { 
 
    box-sizing: border-box; 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container-fluid.flex, 
 
.content__1 { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.container-fluid.flex { 
 
    height: 100vh; 
 
} 
 
.content__1 { 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex: 1; 
 
} 
 
header { 
 
    background: black; 
 
    padding: 15px; 
 
    color: white; 
 
    z-index: 1; 
 
} 
 
img { 
 
    width: 60%; 
 
    max-height: 70%; 
 
    height: auto; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<section class="container-fluid flex"> 
 
    <header>This is a header</header> 
 
    <div class="content__1"> 
 
    <img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" /> 
 
    <p>This is some awesome text</p> 
 
    </div> 
 
</section>

Sie können diese Tabellen mit CSS tun. Sagen wir header hat height: 50px jetzt können Sie height: calc(100vh - 50px) auf Inhalt Element mit display: table verwenden. Jetzt müssen Sie nur Inhalte in Tabelle zu zentrieren und Sie können das tun, wenn Sie Inhalt in einem anderen div wickeln, die display: table-cell und vertical-align: middle Eigenschaften

* { 
 
    box-sizing: border-box; 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container-fluid.flex { 
 
    height: 100vh; 
 
} 
 
header { 
 
    background: black; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    color: white; 
 
    z-index: 1; 
 
} 
 
.content__1 { 
 
    display: table; 
 
    height: calc(100vh - 50px); 
 
    text-align: center; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
img { 
 
    width: 60%; 
 
    max-height: 70%; 
 
    height: auto; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<section class="container-fluid flex"> 
 
    <header>This is a header</header> 
 
    <div class="content__1"> 
 
    <div class="inner"> 
 
     <img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" /> 
 
     <p>This is some awesome text</p> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

Wenn ich Ihre Frage richtig verstanden habe, können Sie Folgendes tun können:

<style> 
    body, 
    html { 
     background-image: url('http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg'); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-size: 80%; 
     background-position: center; 
     height: 100%; 
    } 

    section { 
     position: relative; 
     min-height: 100%; 
     min-height: 100vh; 
    } 

    .content__1 { 

    } 

    header { 
     top: 0; 
     position: absolute; 
     padding-top: 2em; 
    } 
</style> 

Der Körper wird dann:

<body> 
    <section class="container-fluid"> 
     <header>This is a header</header> 
     <div class="content__1"> 
      <p> 
       This is some awesome text 
      </p> 
     </div> 
    </section> 
</body> 

Answer 3

haben Wenn Sie nicht wie, wie klein Bild bekommt, wenn Größenanpassung Stellen Sie Mindestbreite: 300 Pixel oder die Pixel, die Sie darstellen möchten.