埋め込んだiframeのサイズを調整 - transformで拡大縮小

Amazonアソシエイトのバナーをなんちゃってレスポンシブ対応させたけれど、設置する場所の親要素にピタリと収まるサイズがなかった。
小さすぎるか、ちょっと大きい。
小さいバナーはまあ我慢するとして、ちょっと大きいバナーは設置してはみ出した部分を「overflow: hidden;」としてお茶を濁した。

しかし、どうも気持ち悪い。

バナーのデザインによってはトリミングしたことで情報が伝わりにくくなることもある。
バナーサイズに合わせてサイトのレイアウトを決めてしまえばいいのかもしれないけれど、そのサイズのバナーが作られないこともあるし、そうなったら腹立たしいことこの上ない。

いろいろ考えてiframeの埋め込み元の要素を埋め込み先で調整しようと思ったけれど、それはできない。

ということで、「transform: scale();」を使用して全体を縮小させるという、シンプルかつ強引な方法で解決した。

iframeを埋め込む親要素のサイズは620px。iframeの中にある画像のサイズは640px。比率を保ったまま縮小したいので、縮小率は「620 / 640 = 0.96875」。
「transform-origin: 0 0;」は縮小する際の基準点。この場合は左上を基点にしている。

「transform: scale(calc(100% / 640px));」みたいなことができたら真のレスポンシブ対応ができそうだけれど、それはできなかった。「scale」の値は0〜1じゃないとダメらしい。残念。

この文章がお役に立ったらうれしいです。当サイトをサポートしてあなたも良い気分になりましょう。