iFrame Responsive

 

Die Skalierung von Inhalten die per iFrame eingebunden werden lässt doch sehr zu wünschen übrig.

Der erste iFrame wurde per Widget > Struktur > iFrame eingebunden, das zweite per CSS in einem responsiven DIV dargestellt.

Zum testen einfach das Browserfenster in der Breite verkleinern und das Verhalten der Skalierung beobachten.


per Widget > Struktur > iFrame eingebunden


per CSS in einem responsiven DIV eingebunden

CSS-Code

<style>

.elastic-frame {

position: relative;

padding-bottom: 55%;

padding-top: 15px;

height: 0;

overflow: hidden;

}

.elastic-frame iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

Quellcode

<div class="elastic-frame"><iframe width="900" height="500" src="http://www.zp-widgets.de/" frameborder="0" allowfullscreen></iframe></div>

CSS-Code einbinden

Quellcode einbinden

support
Dutch English French German