Question

我正在使用Weebly设计电子商务网站。我的产品元素图片有问题，图片显示的大小是原始上传图片的两倍，由于客户为我提供了这些图片，因此我无法访问任何其他图片。

我似乎无法使图像保持“自然”大小。

我尝试过更改我认为相关的CSS；并添加了以下内容；

div.wsite-com-product-images-main-image,.wsite-com-product-images-main image{width: 100% !important;Height: 100% !important;}

和

.mousetrap{display:none;}

似乎都没有用，可能是一个.js查询，该查询正在运行以调整图像大小，但是我可以找到相关的代码。

网站是https://www.exoticcarving.com/

示例页面：https://www.exoticcarving.com/store/p117/Wooden_Bear_%28log%29%2C_handmade_from_suar_wood.html

真的很感谢您的帮助

Answer 1

您想要这样的东西吗？

.small img {
  width: 200px;
  height: 400px;
  object-fit: contain;
}

.img-small {
  width: 200px;
  height: auto;
}

<div class="small">
  <img src="https://www.w3schools.com/css/paris.jpg" />
</div>

<img src="https://www.w3schools.com/css/paris.jpg" class="img-small" />
<img src="https://via.placeholder.com/1000x1000" class="img-small" />
<img src="https://via.placeholder.com/4000x3000" class="img-small" />

设置宽度并将height属性设置为auto将正确缩放图像。另一方面，这里是对object-fit的引用：）

此外，这里还有一个working example。：）

在Weebly中维持产品图片尺寸和长宽比

1 个答案: