Ich versuche, ein Raster von Bildern in einem 2x2 (horizontal x vertikal) Raster zu machen. Wenn der Bildschirm auf eine kleinere Größe verkleinert wird, möchte ich, dass diese Bilder in einem vertikalen 1: 4-Format angezeigt werden, sodass sie den größten Teil ihrer Größe beibehalten. Ich habe einige verwandte Artikel von verschiedenen Websites gefunden, die alle den Inhalt der gesamten Seite ausfüllen. Das möchte ich nicht machen. Das folgende Bild zeigt, wie das 2x2-Raster aussehen sollte. In der geänderten Version der Website ist es völlig in Ordnung, dass die Bilder den gesamten Bildschirm ausfüllen. Wie würde ich das machen?2x2 Image Responsive Image Grid
Ich habe jetzt ein paar Screenshots von, wie ich möchte, dass das Endprodukt grob aussehen, aber mit Bildern anstelle der roten Quadrate.
e.g. desktop resolution
e.g. smartphone resolution
.imageLineTop {
\t display: inline-block;
\t width: 100%;
\t height: 725px;
\t top: 60%;
\t left: 50%;
\t transform: translate(50%, 50%);
}
.imageLineBottom {
\t display: inline-block;
\t margin-top: 45px;
\t width: 100%;
\t height: 725px;
\t top: 60%;
\t left: 50%;
\t transform: translate(50%, 50%);
}
#img0 {
\t height: 700px;
}
#img1 {
\t height: 700px;
}
#img2 {
\t height: 700px;
}
#img3 {
\t height: 700px;
}
#fadeBox0 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t left: 24%;
\t position: absolute;
\t display: none;
}
#fadeBox1 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t right: 24%;
\t position: absolute;
\t display: none;
}
#fadeBox2 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t left: 24%;
\t position: absolute;
\t display: none;
}
#fadeBox3 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t right: 24%;
\t position: absolute;
\t display: none;
}\t <!--Top image line-->
\t \t <section class="imageLineTop">
\t \t \t <img class="discoverImage" id="img0" src="assets/imgs/1.jpg">
\t \t \t <img class="discoverImage" id="img1" src="assets/imgs/2.jpg">
\t \t \t <section id="fadeBox0">
\t \t \t \t <h3 class="imageInlineTitle">Purity.</h3>
\t \t \t </section>
\t \t \t <section id="fadeBox1">
\t \t \t \t <h3 class="imageInlineTitle">Style.</h3>
\t \t \t </section>
\t \t </section>
\t \t <!--Bottom image line-->
\t \t <section class="imageLineBottom">
\t \t \t <img class="discoverImage" id="img2" src="assets/imgs/3.jpg">
\t \t \t <img class="discoverImage" id="img3" src="assets/imgs/4.jpg">
\t \t \t <section id="fadeBox2">
\t \t \t \t <h3 class="imageInlineTitle">Integrity.</h3>
\t \t \t </section>
\t \t \t <section id="fadeBox3">
\t \t \t \t <h3 class="imageInlineTitle">Courage.</h3>
\t \t \t </section>
\t \t </section>
So platzieren Sie einfach diese 2 Bilder in Mutter div mit einigen max-width und die div Eltern-Center. –
können Sie Ihren Code posten? – Tommy
Sicher, lade es jetzt hoch. – Josh