Verwendung: Bilder mit <img>Tag bescheiden bei unterschiedlichen Fenstergrößen

Mario's Avatar

Mario

11 Oct, 2017 08:55 AM

Produkt: Tao Contao
Contao-Version: 4.4
Browser und Browserversionen: Google Chrome 61.0.3163.100

Hallo,

ich habe das Problem, dass die Banner zb bei der mobilen Version proportional verkleinert werden. Das heißt das Format wird beibehalten.(was ja auch teilweise Sinn des flexiblen Layouts ist) Dadurch sind dann die Banner aber auf dem Handy sehr klein. Ich möchte eine feste Höhe bei der mobilen Version einstellen (270px) aber das Banner soll dabei seitlich beschnitten werden ohne dass das Bild verzerrt wird (die rechte Hälfte des Bildes ist dann nicht mehr sichtbar). Wie mache ich das?
Beispiel: https://contaovier.lento.de/kontakt

  1. Support Staff 1 Posted by RockSolid Theme... on 11 Oct, 2017 12:35 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Wenn Sie Ihren CSS-Code folgendermaßen anpassen, sollte das Bild wie gewünscht groß bleiben und rechts abgeschnitten werden:

    @media screen and (max-width: 700px) {
      .kontakt-lento .seitenbanner .image_container {
        height: 100%;
      }
      .kontakt-lento .seitenbanner .image_container img{
        margin-left: 0;
        height: 100%;
        width: auto;
        max-width: none;
      }
      .kontakt-lento .seitenbanner{
        height: 270px;
        overflow: hidden;
      }
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac