Поддержание размера изображения продукта и соотношения сторон в Weebly - PullRequest
Новая
       11

Поддержание размера изображения продукта и соотношения сторон в Weebly

0 голосов
/ 12 декабря 2018

Я использую 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

Буду очень признателен за помощь, пожалуйста

1 Ответ

0 голосов
/ 12 декабря 2018

Вы хотели что-то подобное? 

.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:)

Кроме того, вот рабочий пример .:)

...