时间戳

首页 > 解决方案 > 我正在尝试使用 css 将每个图像缩放为相同的大小（使用反应）但存在失真

javascript - 我正在尝试使用 css 将每个图像缩放为相同的大小（使用反应）但存在失真

问题描述

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

谢谢你的时间。

我的沙箱：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;
}

标签： javascriptcssreactjsflexboxfrontend

解决方案

如果不是，则无法制作相同宽度和高度的图像。可以做的最好的事情是为图像的父元素设置高度和宽度，并让图像进行相应的调整。请参见下面的示例代码：

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

推荐阅读