Ankündigung

Einklappen
Keine Ankündigung bisher.

Bild in einem Contrainer darstellen ...

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild in einem Contrainer darstellen ...

    Wie kann ich bei Grid in einer Zelle ein Bild darstellen?
    HTML-Code:
      <body>
        <div class="flex-container">     
            <div class="flex-item">Halloo Welt</div>
            <img src="Titelbild2.jpg">
    
        
        </div>
      </body>
    
    Hat jemand eine Hilfeseite, mit der man das Bild nach Pixel / abgerundet darstllen kann?

  • #2
    Zitat von tomovic Beitrag anzeigen
    ...
    Hat jemand eine Hilfeseite, mit der man das Bild nach Pixel / abgerundet darstllen kann?
    Hilfeseite

    Kommentar


    • #3
      beides in einer seite scheint scheint echt schwer zu finden ...-

      https://www.google.com/search?q=imge...flex+container

      Kommentar


      • #4
        thx,
        stimmt ich hätte auch googlen können.
        Vorlage:
        https://media.kulturbanause.de/2016/...ws-columns.png

        Ziel:
        1. Zeile ein Bild, es nimmt alle 4 Zellen ein. ( Ich will aber NICHT von links nach rechts scrollen UND das 1.Bild soll unabhänig von der Pixelgrösse sein )

        2.Zeile
        - leer - Bild2 - Bild3 - leer -


        HTML-Code:
        <!DOCTYPE html>
        <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width,inital-scale=1
          0" />
          <link rel="stylesheet" href="style.css"></>
          <title>Doc</title>
          </head>
          <body>
              <div class="container">
                    <div class="gallery">
                        <figure class="gallery__item gallery__item--1">
                            <img src="Titelbild1.jpg" alt="Gallery image 1" class="gallery__img">
                        </figure>
                        <figure class="gallery__item gallery__item--2">
                            <img src="Titelbild2.jpg" alt="Gallery image 2" class="gallery__img">
                        </figure>
                        <figure class="gallery__item gallery__item--3">
                            <img src="Titelbild3.jpg" alt="Gallery image 3" class="gallery__img">
                        </figure>
                        </div>
                </div>
          </body>
        </html>
        
        
        
        
        HTML-Code:
        body {
            color: white;
            background-color:black;
            font-size: 1.6rem;
            margin: 0;
        }
        
         
          .gallery {
            display: grid;
            grid-template-rows:2000px 1fr 100px;
            grid-template-columns:25% 25% 25% 25%;
        
        }
        
        .gallery__item--1 {
        grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 5;
          
        }
        
        .gallery__item--2 {
         grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 3;
        
        
        .gallery__item--3 {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 3;
            grid-row-end: 4;
        }
        
        Die Bilder überpappen sich und ich muss nach rechtsscrollen, was mache ich falsch?

        Kommentar


        • #5
          1. Kann es sein, dass Du Zeile (row) und Spalte (column) vertauscht hast?
          2. Ist grid-template-rows:2000px richtig?
          3. Nach .gallery__item--2 fehlt die schließende Klammer }.
          4. Haben die Bilder die passende Größe für die Grids, ansonsten anpassen?
          Ansonsten hier nochmal nachlesen bzw. hier selber probieren/testen.

          Kommentar


          • #6
            Zitat von VT1816 Beitrag anzeigen
            [LIST=1][*]Kann es sein, dass Du Zeile (row) und Spalte (column) vertauscht hast?[*]Ist grid-template-rows:2000px richtig?[*]Nach .gallery__item--2 fehlt die schließende Klammer }
            Stimmt.

            Zitat von VT1816 Beitrag anzeigen
            1. Haben die Bilder die passende Größe für die Grids, ansonsten anpassen?
            Ansonsten hier nochmal nachlesen bzw. hier selber probieren/testen.
            Sorry, ich steige einfach nicht durch. Egal wie ich die grösse anpasse, Sie geht nicht über den ganzen Bildschirm.

            HTML-Code:
            <!DOCTYPE html>
            <html lang="en">
              <head>
              <meta charset="UTF-8" />
              <meta http-equiv="X-UA-Compatible" content="IE=edge" />
              <meta name="viewport" content="width=device-width,inital-scale=1
              0" />
              <link rel="stylesheet" href="style.css"></>
              <title>Doc</title>
              </head>
              <body>
                  <div class="container">
                        <div class="gallery">
                            <figure class="gallery__item gallery__item--1">
                                <img src="g2.jpg" alt="Gallery image 1" class="gallery__img">
                            </figure>
                            <figure class="gallery__item gallery__item--2">
                                <img src="gq.jpg" alt="Gallery image 2" class="gallery__img">
                            </figure>
                            <figure class="gallery__item gallery__item--3">
                                <img src="gq.jpg" alt="Gallery image 3" class="gallery__img">
                            </figure>
                            </div>
                    </div>
              </body>
            </html>
            HTML-Code:
            body {
                color: white;
                background-color:black;
                font-size: 1.6rem;
                margin: 0;
            }
            
             
              .gallery {
                display: grid;
                grid-template-rows:300px 1fr 100px;
                grid-template-columns:10% 40% 40% 10%;
            
            }
            
            .gallery__item--1 {
            grid-column-start: 1;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 2;
               
            }
            
            .gallery__item--2 {
                grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 2;
                grid-row-end: 3;
            }
            
            .gallery__item--3 {
                grid-column-start: 3;
                grid-column-end: 4;
                grid-row-start: 2;
                grid-row-end: 3
            }
            http://chris.feledi.de/test/index.html


            Kommentar


            • #7
              ... Nachtrag, verstehe ich da so richtig? Es gibt keine Funktion, der mir das erste obere Bild mit voller breite Breite ohne Scrollen richtig sauber anzeigt, wenn ich verschiedene Auflösungen habe?

              Kommentar


              • #8
                Moin.

                Die klasse "gallery__img" ist nicht definiert.

                Ein:
                HTML-Code:
                .gallery__img {
                    
                    width:100%;
                }
                auf das erste Bild könnte helfen.
                Lg

                Kommentar


                • #9
                  möglicheweise sucht du auch sowas ..

                  https://masonry.desandro.com/layout

                  Kommentar


                  • #10
                    Anstatt width: 100% besser width: stretch verwenden, dann werden padding und margin nicht zum Problem

                    Code:
                    img {
                        width: -webkit-fill-available;
                        width: -moz-available;
                        width: stretch;
                    }

                    Kommentar


                    • #11
                      Zitat von Blar Beitrag anzeigen
                      Anstatt width: 100% besser width: stretch verwenden, dann werden padding und margin nicht zum Problem
                      Das ist experimentell, sinnvoller wäre wohl box-sizing: border-box;

                      Kommentar

                      Lädt...
                      X