Значок CSS Zoom?

Question

У меня есть класс img для retina (2x DPI) и с использованием zoom:50% работает отлично. Однако поддержка браузера ограничена.

Я пробовал transform: scale(0.5), но он не делает то же самое - он масштабирует изображение на основе обертки div, в которой он находится (50% от ширины div), а не самой ширины изображения.

Answer 1

zoom: 50% Прилагается к изображению, кажется, делает его правильным размером, но по какой-либо причине также влияет на родительский div (в Chrome по крайней мере). transform: scale(0.5), как представляется, размер изображения, а также правильный размер, если применяется к самому изображению.

div { 
 
    width: 400px; 
 
    border: 1px solid red; 
 
} 
 

 
img { 
 
    border: 1px solid blue; 
 
    /*zoom: 50%;*/ 
 
    transform: scale(0.5); 
 
}

<div> 
 
    <img src="" width="300" height="200"> 
 
</div>

Answer 2

Попробуйте использовать указанные ниже элементы.

-moz-transform: scale (0.5);
-webkit-transform: масштаб (0,5);
-o-transform: шкала (0,5);
-ms-transform: scale (0.5);
transform: scale (0.5);

Примечание: Но это будет работать, если версия браузера должна быть выше.