【发布时间】：2021-08-05 20:45:05
【问题描述】：
我使用 RestAPI，它给了我不同大小的 SVG。有些图像适合，但有些图像不适合。 示例：如果您查看边框和图像，您就会明白。
主要问题是；我不知道所有图片尺寸，我该如何设置这种情况？ （如果给定 100% 的高度，则更改卡片高度，我不想要这个。）
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/afg.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
<a href="#!">Go to detailed information.</a>
</footer>
</div>
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/blr.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
<a href="#!">Go to detailed information.</a>
</footer>
</div>
.card {
border: 2px solid black;
text-align: center;
margin-bottom: rem(50px);
width: 320px;
overflow: hidden;
animation: showCard 0.7s ease-out forwards;
img {
vertical-align: middle;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&__body,
&__footer {
background: $skyblue;
}
&__body {
&-name {
color: $text-navy;
padding: rem(10px) 0;
font-size: rem(20px);
font-weight: $font-bold;
font-weight: normal;
border-bottom: 4px solid $text-navy;
}
&-infos {
padding: rem(15px) 0;
display: flex;
justify-content: center;
color: $text-navy;
span {
white-space: nowrap;
font-size: rem(14.3px);
}
span:not(:last-child) {
padding-right: rem(5px);
border-right: 3px solid $text-navy;
}
span:not(:first-child) {
padding-left: rem(5px);
}
}
}
&__footer {
border-top: 3px solid $text-navy;
padding: rem(15px) 0;
background: $text-navy;
cursor: pointer;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
【问题讨论】：
-
你能分享一些代码吗？
-
@YashMaheshwari 我编辑了。
-
标志有不同的形状。如果你把中间的高一点，它要么必须更宽，要么被压扁。你需要指定你想要发生的事情。听起来你想要壁球（？）