Размытые изображения в представлении каталога

Недавно я создал сайт электронной коммерции и загрузил изображения продуктов размером 800 x 800. Проблема в том, что в представлении каталога они выглядят размытыми, но на одном продукте они красивые и четкие.

Тема отображает изображения каталога с разрешением 290 x 290, а css по умолчанию:

@media (min-width: 768px) {
.product-item .wrap-img img {
  width: 100%;
  height: 100%;
 }
}

Как я могу это исправить? Мне нужно изменить размер изображений, использовать какой-то css, что-то еще??

Спасибо


image css blurry
person Doggednewbie    schedule 23.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваше загруженное изображение больше, чем область отображения темы, что, в свою очередь, заставляет браузер уменьшать ваше изображение и «угадывать», как оно будет выглядеть в меньшем размере. Иногда это приводит к неудовлетворительному рендерингу (как в вашем случае).

Чтобы исправить это, вы можете:

1) Измените размер ваших изображений точно или примерно до указанного размера области изображения (290x290), чтобы браузеру не приходилось масштабировать и повторно сэмплировать ваше изображение.

2) Вы можете изменить стиль рендеринга изображения, используемый браузером, на один из ваших предпочтений:

.product-item .wrap-img img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

Смотрите здесь для более полного объяснения:

https://css-tricks.com/almanac/properties/i/image-rendering/

person dommmm    schedule 23.01.2017
comment
Спасибо за ответ и ссылку, я попробую это и изменю размер, если не получится. - person Doggednewbie; 23.01.2017