您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下：
1. 在 HTML 中创建门和灯笼的元素，并给这些元素添加类名。例如：
<div class="door">门</div>
<div class="lantern">灯笼</div>
2. 在 CSS 中为门添加打开的样式。例如，可以使用 transform 属性来旋转门：
.door {
transform: rotate(90deg)
}
3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如，可以使用以下样式来使灯笼从上方移动到下方：
.lantern {
animation: moveDown 1s ease-in-out
}
@keyframes moveDown {
from {
top: -100px
}
to {
top: 100px
}
}
4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法，来添加动画类名，从而触发动画的播放。
例如：
document.querySelector('.door').addEventListener('click', function() {
document.querySelector('.lantern').classList.add('lantern-animation')
})
希望这些信息能帮助到您！
把图片设为父级元素的背景图片是最简单的方法：
<div style="width:400px height:300px background:url(123.jpg) no-repeat center / cover"></div>如果一定要以单独的图片展示，则这样：
<div style="position:relative width:400px height:300px overflow:hidden"><img src="123.jpg" style="position:absolute left:50% top:50% transform:translate(-50%,-50%) min-width:100% min-height:100% " />
</div>
<!--以上适用于图片的长和宽至少有一个是小于div外框的情况-->
<!--如果图片的长和宽都大于div外框，则必须结合js才行-->
<div style="position:relative width:400px height:300px overflow:hidden">
<img src="123.jpg" style="position:absolute left:50% top:50% min-width:100% min-height:100% transform:translate(-50%,-50%)" onload="if(this.width>400&&this.height>300){if(this.width/this.height<400/300){this.style.maxWidth='100%'}else{this.style.maxHeight='100%'}}" />
</div>
什么叫演示演示？？
应该叫使用吧！
============================================
一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。<元件(标签) STYLE="性质(属性)1: 设定值1 性质(属性)2: 设定值2 ...}
例如：
<TD STYLE="COLOR:BLUE font-size:9pt font-family:"标楷体" line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签： 将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
BODY {
color: BLUE
background: #FFFFCC
font-size: 9pt}
TD, P {
COLOR: GREEN
font-size: 9pt}
-->
</STYLE>
三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
