Я пытаюсь масштабировать каждое изображение до одинакового размера с css (используя реакцию), но есть искажение

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%;
}