Question

我正在尝试将亚马逊横幅添加到网站（由WordPress提供支持）并使其响应。我试过像

这样的东西

.adbanner {
    position: relative;
    width: 100%;
    padding: 64% 0 0 0;
    height: 0;
    overflow: hidden;
}
.adbanner iframe,
.adbanner object,
.adbanner embed,
.adbanner table,
.adbanner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

和

<div class="adbanner">
    <!-- copied and pasted Amazon code -->
    <iframe src="http://rcm-fe.amazon-adsystem.com/blah/blah/blah...">
</div>

但是，在移动设备上（或缩小的浏览器窗口中），横幅仍然具有原始大小，并且不适合窗口。

我试图通过JavaScript控制大小，但由于跨域，它无法正常工作。有没有办法控制iframe内容的大小？

Answer 1

请提供像这样的图像的MaxWidth

img {max-width:100%}

请参阅此链接

https://wpbeaches.com/make-images-scale-responsive-web-design/

如何在iframe中控制img的宽度

1 个答案: