html - Image not respecting the size of it's parents -



html - Image not respecting the size of it's parents -

i'm using flexslider , i'm wrapping img within div displayed inline-block. way, can contain other elements (a button on hover) within same div , position them relatively that. works expected on chrome on mozilla image seems disregard height or width restrictions set on it's parent elements , display in total size. heres quick codepen mimics issue. http://codepen.io/spylefkaditis/pen/hysbi

again works fine on chrome not on mozilla. ideas?

html:

<ul> <li> <div class="image"> <img src="http://lorempixel.com/1200/1800/" alt="" /> <!-- <a href="#" class="btn">button</a> <div class="modal"> <p class="message"></p> </div>--> </div> </li> </ul>

scss:

*{ box-sizing:border-box; } html,body{ height:100%; width:100%; } ul{ margin:0; padding: 0; width: 100%; height:100%; list-style-type:none; li{ display:inline-block; position:relative; height:100%; width: 100%; text-align:center; .image{ position:relative; display:inline-block; text-align:center; img{ display: inline-block; max-height:100%; width:auto; } /* .btn{ position:absolute; left:0; bottom:0; background-color:black; } */ } } }

you need set height value .image element follows:

.image{ position:relative; display:inline-block; text-align:center; height: inherit; }

otherwise, div.image expands height accommodate content, in case, big image.

see demo at: http://codepen.io/anon/pen/hptco

i tested in firefox , chrome , seems work okay.

html css

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more