0
У меня есть фоновое изображение, установленное на div на 100%.Можно ли избежать размытия при уменьшении изображения с помощью преобразования?
<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>
Когда я масштабирую это изображение, отредактировав ширину/высоту элемента, он сохраняет свое качество.
<div style="width: 247.5px; height: 185.5px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>
Однако, когда я масштабировать изображение вниз, используя transform: scale, изображение теряет качество.
<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat; transform: scale(.25);"></div>
Адрес demo of the results.
Изображение только, кажется, теряет качество в браузерах webkit. Chrome хуже, чем Safari.
Кто-нибудь знает, почему изображение теряет качество, используя transform: scale, и есть ли способ вокруг него?
Нет там Css –
Существует (преобразование: масштаб (.25)), он просто объявлен как встроенный стиль. – colmtuite
Возможный дубликат [Использование преобразования: масштаб приводит к размытым изображениям] (https://stackoverflow.com/questions/27060690/using-transform-scale-results-in-blurry-images) – Adam