Containergröße ist nicht das gleiche wie Inhalt, wenn ich 'transform' verwende

Ich habe ein div namens 'imgSlide' mit einem Bild im Inneren. Ich stelle die Bildbreite auf 100% ein, weil ich es mit der Größe des Navigators neu skalieren muss. Jetzt kommt das Problem, wenn ich die "Transform" -Eigenschaft verwende, verschiebe ich das Bild nach oben, aber dann hinterlässt es ein Leerzeichen.Containergröße ist nicht das gleiche wie Inhalt, wenn ich 'transform' verwende

Image to explain better my problem even more

Ich möchte wissen, wie kann ich den Raum löschen, so dass die unten im Abschnitt (gelber Balken) bewegen kann.

Ich möchte eine reine CSS-Lösung, aber wenn es absolut keine Möglichkeit gibt, es nur mit CSS zu ermöglichen, möchte ich wissen, wie ich das auf andere Weise lösen kann.

PD: Ich möchte keine Pixel oder ems in Containerhöhe verwenden, weil ich den Container rescale brauche, wenn ich den Navigator verkleinere.

Bearbeiten: Ich habe ein neues Bild hochgeladen, ich denke, es erklärt richtig, was ich suche.


 

 
#slide{ \t \t 
 
\t transform: translateY(-20%); \t 
 
} 
 
#imgSlide img{ 
 
\t display:block; 
 
\t width:100%; 
 
} 
 
#content{ \t \t 
 
\t height:50px; 
 
\t background:yellow; 
 
}

<body> 
 
\t <header> \t \t 
 
\t </header> 
 
\t <section id="body"> \t 
 
\t \t <section id="slide"> 
 
\t \t \t <div id="imgSlide"> 
 
\t \t \t \t <img src="https://images2.alphacoders.com/209/209140.jpg"/> 
 
\t \t \t </div> \t \t \t \t 
 
\t \t </section> 
 
\t \t <section id="content"> \t \t \t 
 
\t \t </section> 
 
\t </section> 
 
\t <footer> 
 
\t </footer> 
 
</body>

Quelle

2016-04-05 GhostOrder

Sie sollten versuchen, genauer zu sein. Was meinst du mit "Grenzen" hier: "um die Grenzen des Containers dem Inhalt gleich zu machen"? Sollte das Bild 100% der Breite ausfüllen? Was versuchst du zu erreichen? – chrisv

Sorry mein Englisch ist nicht sehr gut, aber ich habe ein Bild beigefügt, um mein Problem besser zu erklären. – GhostOrder

Wenn ich verstehe Ihre Frage, können Sie sowohl das Bild und den Inhalt in einem "Container" wickeln. Wenden Sie dann die Transformation für diesen neuen Container an. Das bedeutet, dass Sie den Container, der sowohl das Bild als auch den Inhalt enthält, transformieren würden. Ich habe ein Beispiel Geige für Sie: https://jsfiddle.net/7ye5q8ke/2/

HTML:

<body> 
    <div id="container"> 

     <section id="slide"> 
     <div id="imgSlide"> 
      <img src="https://images2.alphacoders.com/209/209140.jpg"/> 
     </div>    
     </section> 

     <section id="content">    
     </section> 

    </div> <!-- Div Container END --> 

</body>

CSS:

#slide{  

} 
#imgSlide img{ 
    display:block; 
    width:100%; 
} 
#content{  
    height:50px; 
    background:yellow; 
} 

#container{ 
    transform: translateY(-20%); 
}

Edit:

die Geige Bemerkt nicht funktionierte. Aktualisiert Geige

Edit 2:

In Ihrem Kommentar Sie fragen, ob es semantisch korrekt, ist es nicht. Wenn der Abschnitt "content" eigentlich für den Bildtitel, die Bildbeschreibung usw. gedacht ist, sollten sie sich in demselben Abschnitt befinden. Das Attribut section ist zum Gruppieren von thematisch verwandten Inhalten gedacht. Bedeutung der Abschnitt "Inhalt" sollte im Abschnitt "Folie" sein. Wie so:

<section id="slide"> 
    <div id="imgSlide"> 
     ... 
    </div> 
    <div id="content"> 
    </div> 
</section> <!-- Section slide ends -->

Jetzt sind der Bildinhalt und das Bild im gleichen Abschnitt. Sollte semantisch korrekt sein. Überprüfen Sie diesen Link http://oli.jp/2009/html5-structure1/

Quelle

2016-04-05 19:24:10 chrisv

Es ist eine Teillösung, aber ich habe zwei Probleme damit. Erstens, es behält den weißen Raum am Ende des div (der Container), und zweitens (und das ist mehr eine Frage als eine Aussage), das wäre nicht semantisch richtig ?, da der Slider-Abschnitt nur der Slider sein sollte, und die anderen Abschnitte sollten in anderen Abschnitts-Tags enthalten sein. Ich würde gerne wissen, ob es eine Möglichkeit gibt, den Leerraum zu löschen, wenn ich "transform: translateY (-20%)" verwende, damit der Rest des Inhalts der Website nach oben geht. Ich habe gerade ein neues Bild hochgeladen, um mein Problem besser zu erklären. – GhostOrder

Meine Antwort jetzt aktualisiert. Die Geige funktionierte nicht, aber sie wurde jetzt aktualisiert, um deinen Problemen/Fragen zu entsprechen. Lesen Sie mehr über Abschnitte in dem Link, den ich gepostet habe. Vielleicht hilft es dir, die semantische Frage zumindest zu verstehen. ;) – chrisv

Danke für den Kommentar chrisv! Die Sache ist der "Inhalt" Abschnitt ist nicht für den Bildtitel, ich plane ein Karussell mit Bildern darin, und deshalb denke ich, dass dieser Abschnitt (Inhalt) außerhalb der "Folie" Abschnitt sein sollte. Zurück zu meinem Problem, wie ich schon sagte, selbst wenn ich dieses Wrapper div benutze, verschwindet der weiße Zwischenraum zwischen "content" und "slide", taucht aber wieder am Ende des Wrappers auf – GhostOrder

Containergröße ist nicht das gleiche wie Inhalt, wenn ich 'transform' verwende

Antwort

Verwandte Themen