i-Frame / Rahmen

[struggle]

Hallo,
ich habe ein Bild in einen i-frame eingebunden, das sich quer scrollen läßt. Mir scheint, daß das Bild einen Rahmen bekommen hat, aber nicht der i-frame. Links und Rechts erscheint der Rahmen nur, wenn entsprechend gescrollt wird.
HTML ist:

Code: Alles auswählen

<section class="mbr-section content4" group="Article" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="2">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="0">

        <input type="checkbox" title="Titel Anzeigen" name="showTitle">
        <input type="checkbox" title="Untertitel Anzeigen" name="showSubtitle">
        <input type="checkbox" title="Buttons Anzeigen" name="showButtons">
        <input type="color" title="Hintergrundfarbe" name="bgColor" value="#db6400">
    <!-- End block parameters -->
    </mbr-parameters>

    <div class="container">
        <div class="media-container-row">
            <div class="title col-12 col-md-8">
                <h2 mbr-if="showTitle" class="align-center pb-3 mbr-fonts-style" mbr-theme-style="display-2">
                    Artikeltitel mit solidem Hintergrund
                </h2>
                <h3 mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" class="mbr-section-subtitle align-center mbr-light mbr-fonts-style" mbr-theme-style="display-5">&lt; &nbsp; &nbsp; s c r o l l e n &nbsp; &nbsp; &gt;</h3>
                <div class="mbr-section-btn align-center py-4" mbr-if="showButtons" mbr-buttons mbr-theme-style="display-4">
                    <a class="btn btn-primary" href="https://mobirise.co">MEHR INFO</a>
                    <a class="btn btn-black-outline" href="https://mobirise.co">LIVE DEMO</a>
                </div>
               <div style="display: flex; justify-content: center;">
  <div style="overflow-x: auto; max-width: 100%;">
     <iframe 
    name="myFrame"
    width="1004"
    height="360"
    scrolling="yes"
    src="https://www.meinlangengrassau.de/assets/images/hoellkarte1.png"
    style="
        border: 3px solid #ffffff;
        border-radius: 10px;
        display: block;
    ">
</iframe>   
  </div>                  
</div>
</div>
     </div></div></section>

CSS ist:

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;

.mbr-section-subtitle {
  color: #ffffff;
}

H2 {
  color: #ffffff;
}

iframe {
  border: 3px solid #ffffff;
  border-radius: 10px;
}

Die Adresse ist: https://www.meinlangengrassau.de/hoellberghof

Kann mir bitte jemand helfen, so daß innerhalb eines sichtbaren Rahmens gescrollt werden kann ?

[Volker]

Sollte das so aussehen ? https://www.niederastroth.de/test/

dann setz die Höhe auf 377

[struggle]

Hallo Volker, nein das ist zuviel, dann erscheint ein Rand untr dem Bild. Ausserdem ändert es nichts an meinem Wunsch, einen festen Rahmen (Frame-Border) zu sehen, in dem mein Bild horizontal bewegt werden kann.

[Volker]

Na dann weiß ich nicht was du meinst

https://www.niederastroth.de/test/ hier kann man doch das Bild scrollen horizontal

[struggle]

Hallo Volker, das ist nur bedingt richtig.

Wenn ich Deinen Link anklicke, erscheint dieses Bild:

iframe-5.PNG

Erst wenn ich dann in das Bild klicke, erscheint es, wie gewünscht:

iframe-6.PNG

[Volker]