我正在尝试使用 css 将每个图像缩放为相同的大小(使用 react)，但存在失真

Question

所以我正在尝试将响应式画廊中的图像设置为相同的大小，最终它们是可点击的，目前当我将高度和宽度设置为相同时，如果它们必须拉伸，图像会失真，但这应该不是问题，因为它们试图适应的图像比原点小得多。

谢谢你的时间。

我的沙盒：https://codesandbox.io/s/youthful-cerf-6bbo8

我的组件

const ImageView = ({ data }) => {
console.log(data);
return (
<ul className="flex-container wrap">
{data.map((item, index) => (
<li className="flex-item" key={index}>
{/* <Link to={`/api/posts/item/${item._id}`}> */}
<img
className="single-image"
src={item.image[0]}
alt="shows what this post is offering"
/>
{/* </Link> */}
</li>
))}
</ul>
);
};
export default ImageView;

.css：

.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.nowrap {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap li {
background: transparent;
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.wrap-reverse li {
background: deepskyblue;
}
.flex-item {
background: tomato;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
.single-image {
height: 300px;
}

Answer 1

如果不是，则无法制作具有相同宽度和高度的图像。 最好的办法是将高度和宽度设置为图像的父元素，并让图像相应地调整。 请参阅下面的示例代码：

.wrap li{
width:300px;
height:300px;
}
.single-image {
width: 100%;
}