通过覆盖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中,像这样设置它...

它应该对您有用。