Question

iFrame或包装器div不会改变大小，无论我尝试什么：

输出：

HTML：

<html>
<head>
    <link rel="stylesheet" href="CV.css">
<title>
George's CV
</title>
</head>
<body>
    <div className="phone" style="height: 737px; width: 654px">
        <div className="container" style="height: 536px; width: 350px">
            <iframe src="http://foodsharing-production.herokuapp.com"></iframe>
        </div>
    </div>
</body>
</html>

CSS：

.phone{
    margin:auto;
    height: 737px;
    width: 654px;
    background-image: url("/imgs/phone.png");
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}
.container {
    position: fixed;
    left:0; right:0;
    top:0; bottom:0;
    margin: auto;
    height: 536px;
    width: 350px;
    border:1px solid #000000;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
 }

感觉我可能会遗漏一些明显的东西，任何帮助都会受到赞赏......

Answer 1

更改iframe本身的宽度。 E.g。

<div className="phone">
  <div className="container">
    <iframe width="600px" src="http://foodsharing-production.herokuapp.com"></iframe>
  </div>
</div>

您也可以在CSS中设置：

iframe {
  width: 600px;
}

Answer 2

您应该使用CSS增加其大小

iframe {
  width:350px;
  height:536px;
}

Answer 3

无需同时使用内联和外部样式，只需使用其中一种，最好使用外部样式。您需要定位iframe元素以影响它的样式。我也使max-width: 100%的宽度响应，因为我觉得它可能会派上用场：

＆＃13;

.phone {
  margin:auto;
  height: 737px;
  width: 654px;
  background-image: url("/imgs/phone.png");
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
}

.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 536px;
  width: 350px;
  border: 1px solid;
  border-radius: 5px;
  display: block;
}

iframe {
  width: 500px; /* adjust to your needs */
  max-width: 100%; /* to make it responsive */
}

＆＃13;

<div className="phone">
  <div className="container">
    <iframe src="http://foodsharing-production.herokuapp.com"></iframe>
  </div>
</div>

＆＃13;

无法调整iFrame的大小

3 个答案: