max-width: 80%, а также придерживаться соотношения целочисленного значения исходного размера изображения ⇐ CSS

[Anonymous]

У меня есть изображения JPG, шириной 1500 пикселей, экспортируются с хорошим алгоритмом изменения размера, края хрустящие. Для отзывчивости я использую: < /p>

Код: Выделить всё

img { max-width: 80%; }
< /code>
Это хорошо выглядит на Firefox независимо от размера, но размытие на хром. Как предотвратить размытие на изображение изменение размера в Chrome? дает решение: < /p>
img { image-rendering: pixelated; transform: translateZ(0); }   // also tried crisp-edges, -webkit-optimize-contrast, etc.

Но тогда, в зависимости от изображения, это иногда слишком хрустящий (например, если применяется алгоритм высоких «заточенных краев», он действительно Слишком много ).
Теперь я заметил, что, если использовать ровную половину исходной ширины (ширина = 750), это идеально. Кажется таким же для простых целочисленных соотношений исходного размера: 1/2, 1/4, 3/4 и т. Д.
Вопрос: возможно ли, с правилами CSS Чтобы спросить изображения: < /strong> < /p>

[*] Уважайте максимальную ширину 80%< /li>
и используйте ширину < Strong> только в наборе предварительно выбранной возможной ширины [/b]: 375 (одна четверть), 500 (одна треть), 750 (половина) и т. Д. Автоматически решается браузером (он выбирает наибольшую возможную уважение к максимальной ширине: 80%;)
Или даже лучше: используйте ширину только в наборе соотношения предварительного избрания из исходной ширины IMG: 1/4, 1/3, 1/2, 3/4 < /li>
< /ul>
это обеспечит легко четкие края. < /p>
Как сделать это в CSS? < /strong>

Подробнее здесь: https://stackoverflow.com/questions/794 ... image-size