Bild ausrichten per CSS

[KC]

Hallo Leute,

ich bekomme jedesmal die Kriese beim Ausrichten von Banner Bildern. Das mit CSS margin: auto und display: block funktioniert keinesmal obwohl es auf allen möglichen CSS Tutorials so beschrieben wird.

HTML Code:

<section class="section main-banner" id="top" data-section="section1">
      
      <img src="assets/images/banner.jpg" />
  </section>

CSS:

.main-banner {
  position: relative;
  overflow: hidden;
  margin-bottom: -7px;
    max-width:100%;
    margin-top: 150px;
    background-color: #000;
}

Das Bild soll je nach Screensize horizontal und vertical zentriert werden. Ich bitte um Support

[Raketenwilli]

Hallo Leute,

ich bekomme jedesmal die Kriese beim Ausrichten von Banner Bildern. Das mit CSS margin: auto und display: block funktioniert keinesmal obwohl es auf allen möglichen CSS Tutorials so beschrieben wird.

HTML Code:

<section class="section main-banner" id="top" data-section="section1">
    <img src="assets/images/banner.jpg" />
</section>

CSS:

.main-banner {
   position: relative;
   overflow: hidden;
   margin-bottom: -7px;
   max-width:100%;
   margin-top: 150px;
   background-color: #000;
}

Ich bitte um Support

Erste Hilfeleistung: Notation von Codeblöcken hier im Forum. Du kannst Dir das anschauen, in dem Du unten auf Antwort mit Zitat verfassen klickst. Mehr Support dazu findest Du hier.

Den Rest (Deine eigentliche Frage) erklären Dir die sicherlich begeisterten GUI-Spezies. Vermutlich werden die aber erstmal wissen wollen, was Du eigentlich erreichen willst. z.B. ist doch ein Banner meistens ganz oben und keinerlei Inhalt soll dieses überdecken oder darunter verschwinden… 😀

[Gunnar Bittersmann]

@@KC

ich bekomme jedesmal die Kriese beim Ausrichten von Banner Bildern.

Du meinst die Kreise?

Oder die Krise?

Das mit CSS margin: auto und display: block funktioniert keinesmal obwohl es auf allen möglichen CSS Tutorials so beschrieben wird.

Mit „allen möglichen“ meinst du alle möglichst alten?

Vergiss den Kram, den du da gelesen hast. Mit Grid ist Zentrieren jetzt ein Kinderspiel.

<section class="section main-banner" id="top" data-section="section1">
      
      <img src="assets/images/banner.jpg" />
  </section>

Ich glaube nicht, dass das section-Element hier korrekt ist.

Dem img fehlt das zwingend notwendige alt-Attribut für den Alternativtext.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

TIL: Wikipedia vera...lbert uns. Als Bildquelle kann ich statt

src=".../thumb/1/1c/FuBK_testcard_vectorized.svg/320px-FuBK_testcard_vectorized.svg.png"

auch

src=".../thumb/1/1c/FuBK_testcard_vectorized.svg/320px-x.png"

schreiben. Ihn interessiert nur das 320px und die .png Endung. Und irgendwas mit /-.*/ dazwischen…

Zu deinem Pen:

• freut mich, dass ich mit meiner „Technik“ zum „Auskommentieren“ von Attributen nicht alleine bin 😉 (xwidth, xheight)
• statt justify-content und align-items könnte man auch die Shorthand-Eigenschaft place-content:center hinschreiben.

Und vielleicht sollte man auch gleich das SVG einbinden und nicht die PNG Vorschau?

  <img src="https://upload.wikimedia.org/wikipedia/commons/1/1c/FuBK_testcard_vectorized.svg"
       width="320" alt="Testbild" >

Äh. Ja. Das wollte ich gesagt haben. Bis ich sah, dass dieses dusselige SVG 121KB groß ist und das PNG nur 13,9KB. Weil das SVG kein echtes SVG ist, sondern ein Rasterbild als <image> enthält. Autsch 😕. Dann vielleicht lieber doch das Original mit Anti-PAL Testzeilen?

Rolf

[Gunnar Bittersmann]

@@Rolf B

• freut mich, dass ich mit meiner „Technik“ zum „Auskommentieren“ von Attributen nicht alleine bin 😉 (xwidth, xheight)

Oops, das sollte natürlich gesetzt sein. Hab die xe weggemacht.

• statt justify-content und align-items könnte man auch die Shorthand-Eigenschaft place-content:center hinschreiben.

Danke; auch geändert.

🖖 Живіть довго і процвітайте

[Raketenwilli]

Dann vielleicht lieber doch das Original mit Anti-PAL Testzeilen?

Damit gewinnt man ganz sicher den Preis für den langweiligsten altersgerechten gerontologisch wertvollen Desktop.

[Auge]

Hallo

Dann vielleicht lieber doch das Original mit Anti-PAL Testzeilen?

Nur echt mit 800-Hz-Ton.

Tschö, Auge