<div class="card">
<h1>这是我家的猫咪</h1>
<img src="https://static.fedev.cn/sites/default/files/blogs/2020/2003/cat-632x475.jpg" alt="一只灰色的猫" width="632" height="475" />
<p>一只杂毛猫,喵喵.....</p>
</div>
body {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card {
padding: 2vh;
border: 1px solid #cecece;
border-radius: 5px;
box-shadow: 0 0 2px rgba(#000, 0.25);
resize: horizontal;
overflow: hidden;
display: flex;
flex-direction: column;
width: 280px;
}
img {
max-width: 100%;
height: auto;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.