通过覆盖CSS代码使所有图像大小相同

问题描述

最近我一直在努力创建网店。

我有超过1000张图片导入到网上商店，但是它们都是不同大小的。我正在使用Elementor创建一个网页，该网页拒绝强制图像大小相同。我尝试使用开发人员工具查看CSS并可以看到以下内容：

<img width="360" height="360" src="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png 360w,https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-300x300.png 300w,https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-150x150.png 150w,https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-400x400.png 400w,https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-100x100.png 100w" sizes="(max-width: 360px) 100vw,360px" data-wp-pid="23261">

<img width="360" height="360" src="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png 360w,360px" data-wp-pid="23261">

如您所见，图像在代码中具有指定的宽度和高度。我要添加一条CSS行，以确保所有图像的大小均相同，并覆盖此代码。

在开发人员工具中，我尝试取消选中“ height：auto”行，并且一切似乎都正常进行。 我只是不确定如何定位所有图片或如何获得正确的班级。

有什么建议吗？

解决方法

为您的产品图片设置一个类，我称其为'myproducts'。

.myproducts{
     width: 360px;
     height: 360px;
    }

在html中，像这样设置它...

它应该对您有用。