对How to let one of two vertical elements' height depend on another?的跟踪
我想è¦ä¸€ä¸ªæ’放\æš‚åœæŒ‰é’®ï¼Œè¯¥æŒ‰é’®ä½äºŽæˆ‘的图åƒä¸Šæ–¹ï¼Œå¹¶ä¸”与基础图åƒçš„相åŒéƒ¨åˆ†å®Œå…¨é‡å 。在我的示例ä¸ï¼Œé‚£æ˜¯ä¼é¹…左眼的ä¸å¿ƒã€‚我å°è¯•å®žçŽ°å®ƒï¼š
function playPause() {
if(document.getElementById('player').src.endsWith('dQ39oPh.png')) {
document.getElementById('player').src = "https://i.imgur.com/r4My4Ep.png";
}
else {
document.getElementById('player').src = "https://i.imgur.com/dQ39oPh.png";
}
}
body {
background-image: url('https://i.imgur.com/sWfZ8nq.png');
background-repeat: repeat;
margin: 0;
}
* {
box-sizing: border-box;
}
.fg {
display: grid;
grid-template-rows: 1fr auto;
margin: auto;
height: 100vh;
}
.fg .text {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.text span {
width: 100%;
color: white;
text-align: center;
font-size: 10vmin;
letter-spacing: 3px;
text-shadow: 2px 2px 2px green,
2px -2px 2px green,
-2px 2px 2px green,
-2px -2px 2px green;
}
.img #penguin {
position: relative;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-height: 70vh;
max-width: 90vw;
}
.img #player {
position: absolute;
bottom: 52%;
left: 48.7%;
transform: translateX(-48.7%);
width: 1.3vw;
}
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="fg">
<div class="text">
<span>HNY19</span>
</div>
<div class="img">
<img id="penguin" src="https://i.imgur.com/Ql8A585.png"/>
<img id="player" onclick="playPause()" src="https://i.imgur.com/dQ39oPh.png">
</div>
</div>
</body>
</html>
我的笔记本电脑(1920x969)上的视å£çœ‹èµ·æ¥è¿˜å¯ä»¥ï¼Œä½†æ˜¯åªè¦è§†å£å¤§å°å‘生å˜åŒ–,定ä½å°±ä¼šå˜å¾—混乱。我知é“有一个简å•çš„方法å¯ä»¥åšåˆ°ï¼ˆä¸€åªä¼é¹…的眼ç›æœ‰çŽ©è€çš„图åƒï¼Œå¦ä¸€åªçœ¼ç›çš„ä¼é¹…有åœé¡¿çš„图åƒï¼‰ï¼Œä½†æ˜¯æœ‰æ²¡æœ‰åŠžæ³•åšåˆ°è¿™ç§å“应呢?
我也å°è¯•è¿‡åˆ‡ç‰‡æŠ€æœ¯
<table cellpadding="0" border="0" cellspacing="0">
<tr>
<td><img src="img/penguin_0_0.png"></td>
<td><img src="img/penguin_0_1.png"></td>
<td><img src="img/penguin_0_2.png"></td>
</tr>
<tr>
<td><img src="img/penguin_1_0.png"></td>
<td><a href="#"><img id="player" src="img/penguin_1_1_play.png"/></a></td>
<td><img src="img/penguin_1_2.png"></td>
</tr>
<tr>
<td><img src="img/penguin_2_0.png"></td>
<td><img src="img/penguin_2_1.png"></td>
<td><img src="img/penguin_2_2.png"></td>
</tr>
</table>
具有适当的切片图åƒï¼Œä½†æ˜¯è¿™ç§æ—§çš„切片方法似乎ä¸é€‚ç”¨äºŽç½‘æ ¼CSS。