我将网站加载到我的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>
答案 0 :(得分: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>
答案 1 :(得分:0)
如果你不能接受@ 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>