Размытые изображения на сайте из-за CSS?

Эй, ребята, у меня есть изображения, которые, я считаю, пропорциональны размеру, но они появляются размытыми.Размытые изображения на сайте из-за CSS?

Проблема заключается в их ширине: 100%, но я не понимаю, что я сделал изображения размером с коробки и больше, но они все еще кажутся размытыми.

Я думаю, что я не получаю то, что ПРОСТОТА изображений, так как все они должны быть размером.

Может проблему быть с моим отзывчивым CSS? Если я сниму ширину: 100% изображения, похоже, идут на мой отзывчивый размер. ~ 310px x 180px.

Обычно я думаю, что это был фон-размер: проблема, но я в недоумении, что могло быть причиной этого.

Regular Code: 
.special-offers { margin: 0 0 150px 0; position: relative; } 
.special-offers .banner { width: 33.33%; max-height: 270px; float: left; text-align: center; position: relative; } 
.special-offers .banner a { display: block; width: 100%; height: 100%; position: relative; top: 0; left: 0; z-index: 2; } 
.special-offers .banner a img { position: relative; z-index: 3; width: 100%; } 

Responsive Code: 
.special-offers { margin: 0 0 30px 0; } 
.special-offers .banner { width: 100%; } 
.special-offers .banner a { width: 300px; height: 180px; margin: 0 auto; padding: 0; } 
.special-offers .banner h4 { margin: 0; } 
.special-offers .banner a img { width: 300px; }

любая помощь очень ценится ..

источник

2015-09-16 Alan

Тот, у кого есть бутылка с водой ... Каков размер исходного изображения? –

Изображение текущее 1250px на 750px. Я решил, что более крупное изображение не приведет к размытию. – Alan

Ну, именно поэтому я спрашивал, потому что если вы поместите изображение размером 300 Xnnn px и сделаете его больше ... браузер не может изобретать качество - он может интерпретировать только цвета соседних пикселей, что приводит к (* blur *) довольно неточно) масштабированное изображение с потерей качества. –

Я предполагаю, что я не получаю, что растягивание изображения, так как все они должны быть по размеру.

В вашем примере это не так. Ваш реальный размер изображения меньше, чем вы ожидаете.

источник

2015-09-16 18:31:01 Brad

Интересно .. Похоже, что когда я помещаю изображения в Shopify, они автоматически изменяются. Это может быть совершенно другая проблема. – Alan

@ Алан Да, Shopify это сделает. – Brad

Incase Кто-то контролирует эту тему. Я зашел в свой файл setup_shema.json в папке Config. Здесь я смог найти преступника. { "типа": "изображение", "идентификатор": "banner_2_image.jpg", "метка": "Изображение", "макс-ширина": 310, "Макс-высота": 180, " info ":" (max size: 310px x 180px) " }, --- Исправлена проблема изменения максимальной ширины и максимальной высоты. – Alan

Чтобы устранить проблему, я нашел settings_shema.json в папке Shopify Config.

Здесь я нашел

{ 
    "type": "image", 
    "id": "banner_2_image.jpg", 
    "label": "Image", 
    "max-width": 1310, 
    "max-height": 1180, 
    "info": "(max size: 310px x 180px)" 
    },

Редактирование макс-ширина: и максимальная высота позволила мне исправить изображения. По сути, покупка была уменьшена по размеру изображений, а затем я пытался сделать небольшие изображения на 100%.

источник

2015-09-16 18:55:23 Alan

Размытые изображения на сайте из-за CSS?

ответ

Смежные вопросы