Question

我将网站加载到我的div容器中。当他们徘徊时，div会占据整个屏幕。

问题是，webview的内容也会受到div的影响。

不是缩放内容（在webview中像缩放一样），我只想缩放div以获得网站的全屏。

CSS

html, body {                            /*  added rule  */
  margin: 0;
  height: 100%;
  border: 100px;
}
.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s,          /*  changed property  */
              z-index 0.5s;
}

.box:hover {
  transform: scale(2);                  /*  added property  */
  transition-delay:0.5s;
  z-index: 10;                     /*  added so hovered is on top  */
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  transform-origin: left top;           /*  added property  */
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  transform-origin: right top;          /*  added property  */
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  transform-origin: left bottom;        /*  added property  */
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  transform-origin: right bottom;       /*  added property  */
}

HTML：

<body>
  <div class="box" id="lo">
  <webview src="https://ebay.de" style="height: 100%; width: 100%"></webview>
  </div>
  <div class="box" id="ro">
    <webview src="https://ebay.com" style="height: 100%; width: 100%"></webview>
  </div>
<div class="box" id="lu">
<webview src="https://ebay.fr" style="height: 100%; width: 100%"></webview>
</div>
<div class="box" id="ru">
<webview src="https://ebay.co.uk" style="height: 100%; width: 100%"></webview>
</div>
</body>

Answer 1

您可以增加div的高度/宽度，而不是使用缩放，以避免内容的缩放效果。为此，请将position:absolute与您的元素一起使用，并调整top / left / right / bottom属性而不是transform-origin。

以下是一个示例（我将webview替换为一些内容以显示结果）

html,
body {
  /* added rule */
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.box {
  position: absolute;
  text-align:center;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: all 0.5s;
}
.box img {
 max-width:100%;
 max-height:50%;
}

.box:hover {
  width: 100%;
  height: 100%;
  transition-delay: 0.5s;
  z-index: 10;
  /* added so hovered is on top */
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  top: 0;
  left: 0;
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  top: 0;
  right: 0;
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  left: 0;
  bottom: 0;
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  right: 0;
  bottom: 0;
}

<body>
  <div class="box" id="lo">
    <h1>Title</h1>
    <img src="https://lorempixel.com/400/400/" >
  </div>
  <div class="box" id="ro">
    <h1>Title</h1>
    <img src="https://lorempixel.com/500/500/" >
  </div>
  <div class="box" id="lu">
    <h1>Title</h1>
    <img src="https://lorempixel.com/600/400/" >
  </div>
  <div class="box" id="ru">
    <h1>Title</h1>
    <img src="https://lorempixel.com/400/500/" >
  </div>
</body>

Answer 2

如果你不能接受@ TemaniAfif的建议（看起来很棒），你可能会缩小你的网页浏览量：

html,
body {
  /*  added rule  */
  margin: 0;
  height: 100%;
  border: 100px;
}

webview {
  display: block;
  height: 100%;
  width: 100%;
  border: solid 10px #693;
  box-sizing: border-box;
  transform-origin: left top;   
  transition: all .5s .5s
}

.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s .5s, /*  changed property  */
  z-index 0.5s .5s;
}

.box:hover {
  transform: scale(2);
  z-index: 10;
  /*  added so hovered is on top  */
}

.box:hover webview {
  transform: scale(.5);
  height: 200%;
  width: 200%
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  transform-origin: left top;
  /*  added property  */
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  transform-origin: right top;
  /*  added property  */
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  transform-origin: left bottom;
  /*  added property  */
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  transform-origin: right bottom;
  /*  added property  */
}

<body>
  <div class="box" id="lo">
    <webview src="https://ebay.de">ebay.de</webview>
  </div>
  <div class="box" id="ro">
    <webview src="https://ebay.com">ebay.com</webview>
  </div>
  <div class="box" id="lu">
    <webview src="https://ebay.fr">ebay.fr</webview>
  </div>
  <div class="box" id="ru">
    <webview src="https://ebay.co.uk">ebay.co.uk</webview>
  </div>
</body>

div上的CSS转换不应该影响内部的webview

2 个答案: