gpt4 book ai didi

css - 使 iframe 中的每个元素都响应

转载 作者:太空宇宙 更新时间:2023-11-04 14:01:12 24 4
gpt4 key购买 nike

我有一个展示广告的 iframe。我希望它以这样一种方式响应,即每个具有不同屏幕尺寸的用户都可以看到 100% 宽度的它,而不是 iframe 溢出。如何实现?

最佳答案

Smashing Magazine 已经仅使用 CSS 和容器元素解决了这个问题 - Embedded Responsive Design

要点:

  1. 为有问题的 iframe 创建一个容器包装器
  2. 设置容器的样式;
    (如果容器的类名被称为“video-container”)

    .video-container {
    position:relative;
    填充底部:56.25%;
    顶部填充:35px;
    高度:0;
    溢出:隐藏;

  3. 在容器内设置 iframe 的样式

    .video-container iframe {
    position:absolute;
    顶部:0;
    左:0;
    宽度:100%;
    高度:100%;

希望对您有所帮助!
引用link了解更多信息

关于css - 使 iframe 中的每个元素都响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21504827/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com