html - Height 100% along with Width 100% is causing issue on mobile devices -


i've found ton of posts , questions on mobile width/height. top 2 answers use media queries, or use vh/calc(). other issue i've seen numerously mis-understanding of width/height(100%) vs width/height(auto) use of margins/padding/borders. i've run seems unique, flood of mobile issues, have feeling somewhere out there answer already. if you've seen this, please point correct question/answer.

i've created black glass along element use image previewer. glass , image have width("100%") , height("100%") without padding, margin, or border. on computer, looks perfect. on mobile device, dimensions can thrown off , background shows through.

if remove height("100%") on images taller wide, resizes entire element. if image wider tall, removing width("100%") causes grow appropriately again too. however, doesn't solve issue because without width or height cap @ 100%, larger images overflow.

i first noticed issue on cellphone (android) , have had no issue repeating on chrome's emulator. have uploaded quick recording of seeing screencast.

it's been suggested css rule leaking parent element. chrome supports style 'all: initial;' reset css. manually reset css method. resetting styles did not change issue.

once again, thank taking time @ issue!


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -