我做了一个前端的挑战，要求你创建一个简单的卡，并显示在移动的视图和桌面视图相同的方面。
我使用了移动优先的方法，因为在我的每个项目中，这里的问题是，卡在桌面视图中调整大小，改变了本身的外观
以下是我使用的参考：
下面是我的代码：
body {
background-color: hsl(212, 45%, 89%);
font-size: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-inline: 1rem;
}
img {
width: 100%;
border-radius: .75rem;
}
h1 {
color: hsl(218, 44%, 22%);
}
p {
color: hsl(220, 15%, 55%);
}
#qr_card {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1rem;
background-color: hsl(0 0% 100%);
border-radius: 1rem;
position: absolute;
top: 50%;
}
#card_description {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
margin-bottom: 2rem;
}<body>
<div id="qr_card">
<img src="images/image-qr-code.png" alt="qr" />
<section id="card_description">
<h1>Improove your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</section>
</div>
</body>一切看起来正常，在移动的视图，但我不知道如何使卡不改变大小在桌面视图没有设置一个固定的宽度属性卡本身
1条答案
按热度按时间5jdjgkvh1#
例如，您可以设置
aspect-ratio: 1/2以将高度锁定为宽度。