Css Image Size, How to Fill, But Not Stretch

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

Fill div with image without stretching

You can use Image Liquid js for it.
https://github.com/karacas/imgLiquid

Hope it will help you...

How to set an image's width and height without stretching it?

Yes you need an encapsulating div:

<div id="logo"><img src="logo.jpg"></div>

with something like:

#logo { height: 100px; width: 200px; overflow: hidden; }

Other solutions (padding, margin) are more tedious (in that you need to calculate the right value based on the image's dimensions) but also don't effectively allow the container to be smaller than the image.

Also, the above can be adapted much more easily for different layouts. For example, if you want the image at the bottom right:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

If image is not wide enough, how to make it stretch to the width of the window?

from the doc

When using layout='fill', the parent element must have position:
relative

This is necessary for the proper rendering of the image element in
that layout mode.

What can you do is :

CSS :

add relative to the landingImage class and remove margin auto

.landingImage {
  z-index: 0;
  background-size: cover;
  top: 0;
  padding: 0;
  display: block;
  width: 100vw;
  position: relative;
}

Wrap Image on the div

<div className='landingImage '>
    <Image 
        layout='fill' // required
        objectFit='cover' // change to suit your needs
        src='orcas' //
    />
</div>

---

Related Topics