【发布时间】：2021-06-13 22:09:05
【问题描述】：
我正在尝试使卡片组件响应@media 屏幕（最大宽度：768 像素），但我得到了一个缩小的小图像尺寸。
我尝试使用 vh, % 将容器的高度设置为不同的大小，但似乎都没有像我想要的那样工作。请抽出一些时间来查看代码并帮助我。谢谢。
错误的图片链接：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<title>Responsive Card</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card__header">
<h1>Get <span>insights</span> that help your business grow.</h1>
</div>
<div class="card__paragraph">
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
</div>
<div class="card__footer">
<span>
<h2>10k+</h2>
<p>Companies</p>
</span>
<span>
<h2>314</h2>
<p>Templates</p>
</span>
<span>
<h2>12M+</h2>
<p>Queries</p>
</span>
</div>
</div>
<div class="img__box">
<div class="overlay"></div>
</div>
</div>
</body>
</html>
桌面屏幕的默认代码：
body {
background-color: var(--background-color);
width: 100%;
height: 100vh;
color: #fff;
font-family: var(--body-font);
}
h1,
h2 {
font-family: var(--header-font);
}
.container {
position: relative;
max-width: 1120px;
height: auto;
display: flex;
padding: 25px;
margin: 10vh auto;
}
.card {
position: relative;
background-color: var(--card-background);
position: relative;
width: 100%;
height: auto;
padding: 3rem;
border-radius: 6px 0 0 6px;
}
.card__header {
font-family: var(--header-font);
font-size: 1.2rem;
margin-bottom: 25px;
}
.card__header span {
color: var(--image-overlay);
}
.card__paragraph {
color: var(--paragraph);
margin-bottom: 50px;
line-height: 2rem;
font-size: 1rem;
}
.card__footer {
display: flex;
}
.card__footer span {
margin-right: 3.5rem;
}
.card__footer h2 {
margin-bottom: 0.4rem;
}
.card__footer p {
color: var(--paragraph);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8rem;
}
.img__box {
position: relative;
background: url(/img/img2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
border-radius: 0px 6px 6px 0px;
}
.img__box .overlay {
background-color: var(--image-overlay);
opacity: 0.7;
width: 100%;
height: 100%;
border-radius: 0px 6px 6px 0px;
}
/*Code For making Responsive for screen breakpoint 768px*/
@media screen and (max-width:768px) {
.container {
display: flex;
flex-direction: column-reverse;
width: 80%;
height: 100%;
margin: 50px auto;
}
.card {
width: 100%;
height: 100%;
padding: 2rem;
border-radius: 0 0 6px 6px;
text-align: center;
margin-bottom: 50px;
}
.img__box {
width: 100%;
height: 100%;
border-radius: 6px 6px 0 0;
}
.img__box .overlay {
border-radius: 6px 6px 0 0;
}
.card__footer {
display: block;
}
}
【问题讨论】：
-
请同时提供您对应的HTML代码
-
code sn-p不会执行，请提供相应的HTML代码
-
我已经提供了刚才的html代码，你可以检查一下。而且，如果我将容器高度设为 150vh，它似乎会显示图像，但我想这不是一个好方法。
-
它到底在显示什么...？是否显示白屏？？
-
@anish 用于媒体查询中的 .img__box 规则，根据您的要求尝试 10% - 15% 之间的高度。