Estoutendoproblemasparaentenderporque,quandoinspecionoumelementonomeunavegador(visualizandoa100%),elemedáumtamanhodepixelqueédiferentedoscreengrababertonophotoshop.Comovocêpodevernaimagemanexada.Oqueestáacontecendo?Noanexo,vocêpodeverasinformaçõesdadicadeferramentadonavegadoremrelaçãoaophotoshopeelassãodiferentes.Sevistoem100%nonavegador,certamenteelesdevemserosmesmos.Umpixeléumpixel,nãoé?Aliásaminharesoluçãodetelaé1920x1200eumscreengrababertonophotoshopéexatamenteisso.Entãomeunavegadorestámentindo?
link Se eu fotografar essa imagem em 100% e abri-la no Photoshop, ela diz que é 350 x 350 px, o que é um acréscimo de 75%. Eu não posso explicar isso.
OK. A razão é que o dispositivo que está sendo usado é um tablet (uma espécie de Surface Pro 3). Por alguma razão, os navegadores não renderizam pixels reais, em vez de pixels "relativos". Enquanto o Photoshop calcula os pixels reais de uma imagem.
É a diferença entre o que é chamado de pixel de "hardware" e um pixel de "referência" e esse dispositivo tem uma "proporção de pixel de dispositivo" de 1,7
Os tamanhos são sempre relativos ao elemento atual - se ele estiver incorporado no próximo nível superior e lá o HTML (ou o CSS) disser 'alongar para ajustar', tudo será esticado de acordo. Poderia haver vários níveis disso, por isso é difícil prever o quão grande ele realmente será no final (uma das coisas que tornam a codificação de um navegador tão difícil).
Seu exemplo parece estar alongado em 75%.