图像大小不适合CSS

Question

我正在React中创建一个网站。我有一张卡片，背景是一张图片。问题是，我试图设置的图像不适合卡片。要么太大，要么太小，再加上清晰度低。

我尝试了object-fit: contain和max-width: auto，但没有成功。请检查我的代码：

.card {
width: 350px;
height: 370px;
border-radius: 15px;
padding: 1.5rem;
position: relative;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.card:hover {
transform: translateY(20px);
}
.card:hover:before {
opacity: 1;
}
.card:hover .info {
opacity: 1;
transform: translateY(0px);
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}
.card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}
.card .info h1 {
margin: 0px;
font-size: 2rem;
}
.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}
.card .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}
.card .info button:hover {
background: dodgerblue;
color: white;
}

<div class="card">
<img src="https://i0.wp.com/autonxt.net/wp-content/uploads/2018/01/autocontentexp.com2018-Lincoln-Navigator5-5b1aebecc618f268352b037fb2253a291d670994-1.jpg?resize=2500%2C1500&ssl=1" />
<div class="info">
<h1>Road</h1>
<p>
Lorem Ipsum is simply dummy text from the printing and typeseting industry
</p>
<button>Read More</button>
</div>
</div>

请帮我解决这个问题，谢谢！

Answer 1

使用object-fit : fill。顺便说一句，你的图像大小与你在card上设置的大小不同，所以图像会被拉伸。