不同图像高度相同

问题描述

我在网格中显示了一些图像。但是它们是不同的高度。

我如何让它们的大小相同？

到目前为止的代码。

p.s我正在使用React，因此className。它的工作原理与class完全相同。

<ul className='grid gap-4 grid-cols-1 md:grid-cols-2 pb-10'>
  <li>
    <img
      className='min-h-full object-cover'
      height='800'
      width='800'
      loading='lazy'
      src={project.coverImage}
      alt={project.title}
    />
  </li>
  <li>
    <img
      className='min-h-full object-cover'
      height='800'
      width='800'
      loading='lazy'
      src={project.coverImage}
      alt={project.title}
    />
  </li>
</ul>

解决方法

我不完全知道react语法，但是html中的height和width属性需要在大小数字后面添加px，但是如果在react中不需要这样做，请确保没有任何样式可以覆盖height和宽度属性。

如果没有，您可以向图像添加一个类，并通过css设置高度，以在数字后添加px。

还有一个名为object-fit的具有两个值的属性。第一个是封面，它迫使图像覆盖块，第二个是封面，它使图像适合包含在该块中。

这仅在您设置图像容器的宽度和高度时有效，如果要为所有具有不同大小的图像设置固定的宽度和高度，则可以通过CSS设置高度和宽度，但这会使图像拉伸，因此最佳做法是为图像容器设置固定的宽度和高度，并对图像使用对象适合的包含。