0

内部にフラッシュコンテンツを含むhtmlファイルを持つIFRAMEを使用したレスポンシブデザインがあります。

<iframe width="800px" height="600px" frameborder="0" align="middle" class="iframeStyle" src="linkToHtmlWithFlash.html"> </iframe>

ここで、ウィンドウ幅の変更に応じて、IFRAME とそれに含まれるフラッシュのサイズを比例的に変更する必要があります。

私はこのようなmedia queryとの組み合わせでそれを試しましたtransform:scale

@media (max-width: 767px){
 .iframeStyle {
    transform: scale(0.74);
    transform-origin: 0 0 0;
}
}
@media (max-width: 979px) and (min-width: 768px) {
 .iframeStyle {
    transform: scale(0.9);
    transform-origin: 0 0;
}
}

しかし、この方法は、カットオフに達したときにのみサイズが変更されるため、あまり適していないようです。

jquery または純粋な CSS を使用したソリューションはありますか?

純粋な CSS または jQuery を使用したソリューションはありますか。

4

1 に答える 1