CODEWITHSUNDEEP
htmlcss
Thiago Benine
Thiago Benine

Reputation: 105

-webkit-fill-available isn't working on Firefox

I'm trying to use the property height: -webkit-fill-available.

For that purpose I built this example https://codepen.io/anon/pen/VJoOWW

I'm using Ubuntu 18.04 and when I ran the code on Chrome, everything woks fine, but in Firefox I could not make it work.

My Firefox: Firefox Quantum 68.0, Mozilla Firefox for Ubuntu, canonical 1.0

EDIT1: Using width: -moz-available did little changes on the layout, but the image isn't displaying in the same way as chrome

EDIT2: The first image is correct (Chrome). The last image is displayed on Firefox, I would like to display the image on Firefox in the same way as Chrome

Right Wrong

Upvotes: 1

Views: 8841

Answers (2)

mos2g
mos2g

Reputation: 83

you can simply give a height: inherit; to your <img> and of course to its wrapper <a> and you'll see it works exactly like chrome. also, remove width: -moz-available; its useless here. and with this approach, you won't need height: -webkit-fill-available; anymore. hope it was helpful.

Upvotes: 3

Raul Sauco
Raul Sauco

Reputation: 2705

It seems like you are trying to fit the image inside the containing div. You can do that with well-supported CSS properties. There are many ways, here is one.

.block {
  border: 1px solid red;
  height: 85px;
}
.img {
  margin-bottom: 10px;
  max-height: 100%;
}
<div class="block">
  <a href=''>
    <img class ="img" src="https://s3.amazonaws.com/monetostatic/email/white-label/ustrike/logo_header.png">
  </a>  
</div>

Upvotes: 2

Related Questions