Issue with width of an image CSS

user_14493942 0
Viewed 60

I have a couple of images that I'm trying to use. The height in CSS adjusts but whenever I try to change the width to anything over 183px (probably specific to my image) it simply doesn't work.

.mobile-nav {
  display: block;
}

.mobile-nav-link {
  text-decoration: none;
}

.mobile-nav-img {
  display: block;
  object-fit: contain;
  height: 39px;
  width: auto;
}
<div className='mobile-nav'>
  <a className='mobile-nav-link' href='http://www.google.com'>
    <img className='mobile-nav-img' src={require( 'image1.png')} />
  </a>
  <a className='mobile-nav-link' href='http://www.google.com'>
    <img className='mobile-nav-img' src={require( 'image2.png')} />
  </a>
</div>

css
3 Answers

when styling images don't use height value to the image because it will stretch the original size. You always use width property for the image. And to auto shrink in doing doing responsive just add max-width:100% to the image.

.mobile-nav-img {
  display: block;
  object-fit: cover;
  width: 183px;
  max-width:100%;
}
user_31449980

Just change object-fit: contain to object-fit: cover and it should work

.mobile-nav-img {
  display: block;
  object-fit: cover;
  height: 39px;
  width: auto;
}
user_149833720

The image tag itself has an attribute called width="".

Link

user_132622040
Related