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

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

css webview electron

div上的CSS转换不应影响内部的webview,css,webview,electron,Css,Webview,Electron,我将带有WebView的网站加载到我的div容器中。当他们悬停时，div将占据整个屏幕问题是，webview的内容也会受到div规模的影响与其像缩放一样缩放webview中的内容，我只想缩放div以在其中获得网站的全屏 css html: 可以增加div的高度/宽度来避免内容的缩放效果，而不是使用scale。为此，请使用元素的“位置：绝对”，并调整“上/左/右/下”属性，而不是“变换原点” 下面是一个示例，我用一些内容替换了webview以显示结果 html，身体{ /*附加规则*/

我将带有WebView的网站加载到我的div容器中。当他们悬停时，div将占据整个屏幕

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

与其像缩放一样缩放webview中的内容，我只想缩放div以在其中获得网站的全屏

css

html:

可以增加div的高度/宽度来避免内容的缩放效果，而不是使用scale。为此，请使用元素的“位置：绝对”，并调整“上/左/右/下”属性，而不是“变换原点”

下面是一个示例，我用一些内容替换了webview以显示结果

html，身体{ /*附加规则*/ 保证金：0；身高：100%；溢出：隐藏； } .盒子{ 位置：绝对位置；文本对齐：居中；框大小：边框框；宽度：50%；身高：50%； z指数：0；过渡：均为0.5s； } .box img{ 最大宽度：100%；最大高度：50%； } .box:悬停{ 宽度：100%；身高：100%；过渡延迟：0.5s； z指数：10； /*已添加，因此悬停在顶部*/ } 瞧{ 右边框：1px纯黑；边框底部：1px纯黑；背景色：8cff66；排名：0；左：0； } 反渗透{ 左边框：1px纯黑；边框底部：1px纯黑；背景色：ff751a；排名：0；右：0； } 鲁{ 边框顶部：1件纯黑；右边框：1px纯黑；背景色：3385ff；左：0；底部：0； } 茹{ 边框顶部：1件纯黑；左边框：1px纯黑；背景色：d147a3；右：0；底部：0； } 标题标题标题标题

如果您不能接受@TemaniAfif的建议，您可能会缩小您的网络视图：

html，身体{ /*附加规则*/ 保证金：0；身高：100%；边界：100px； } 网络视图{ 显示：块；身高：100%；宽度：100%；边框：实心10px 693；框大小：边框框；变换原点：左上；过渡：全部.5s.5s } .盒子{ 位置：相对位置；框大小：边框框；浮动：左；宽度：50%；身高：50%； z指数：0；转换：转换0.5s.5s，/*更改属性*/ z指数0.5s.5s； } .box:悬停{ 变换：scale2； z指数：10； /*已添加，因此悬停在顶部*/ } .box：悬停webview{ 变换：尺度；身高：200%；宽度：200% } 瞧{ 右边框：1px纯黑；边框底部：1px纯黑；背景色：8cff66；变换原点：左上； /*附加属性*/ } 反渗透{ 左边框：1px纯黑；边框底部：1px纯黑；背景色：ff751a；变换原点：右上角； /*附加属性*/ } 鲁{ 边框顶部：1件纯黑；右边框：1px纯黑；背景色：3385ff；变换原点：左下角； /*附加属性*/ } 茹{ 边框顶部：1件纯黑；左边框：1px纯黑；背景色：d147a3；变换原点：右下角； /*附加属性*/ } 易趣网易趣网 ebay.fr ebay.co.uk

用图像替换网络视图看起来有点混乱，因为图像正在与其父分区进行缩放。。。无论如何+1是一个好方法@KoshVery否它们没有缩放：它们的高度/宽度正在增加，因为它们被设置为100%，并且没有缩放效果。。。[我替换了图像，因为我们不能在这里使用WebView或iframe]它们看起来像是在缩放，当然。@KoshVery是的，但不像变换那样缩放。。。如果我们考虑缩放的一般意义，是的，它们是缩放，但是如果我们比较变换尺度和宽度/高度的增加，则有一些差异。即使我们看不到它的图像，这就是我给你看的OP和问题的原因。这不是你的解决方案的大问题，但你可以用div替换webview，或者只是用CSS样式。我也在考虑这个问题，但这是一个不好的反向缩放方法。。。它可以工作，但它可能会产生一些错误，你可以阅读这。。我们在这种反向缩放方面遇到了一些问题，我看过这篇文章，甚至试图解决它。但在这种情况下，我们几乎不会遇到这个问题，因为我们不必对齐元素。不管怎样，至少在研究方面是好的。是的，但我们可能会面临类似或其他问题。。因为我们不知道webview的确切内容，所以我们不知道它在逆比例下的行为。。。它可能在98%的情况下有效，但总有2%的机会出现问题。。。所以我们可以使用这种方法，但我们需要注意：绝对同意！您好，喜欢您的代码，因为它比上面的代码运行得更流畅。但是：未被发现的网络视图只有50%的宽度和33%的高度。为什么？如果你试着用电子来运行它，你会看到它。我如何才能做到，即网站100%在自己的网站浏览时其未被发现？

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  */
}

<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>