Make an Image to Fit Its Parent Dimensions

Make an image to fit its parent dimensions

The css property that you want is max-width :

Css

img {
    max-width:100%;
}

You could add a container around your image and set overflow:hidden to prevent images to get bigger than the defined width/height.

Make an image width 100% of parent div, but not bigger than its own width

Just specify max-width: 100% alone, that should do it.

How do I fit an image (img) inside a div and keep the aspect ratio?

You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="Sample Image" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

If you use a JavaScript Library you might want to take advantage of it.

CSS: Make image fill parent but not change parent size

UPDATE:
The method I was using (With flexbox) did not do what I wanted finally so I decided to use css grid and it did it perfectly!

Here is the new css (same html):

.ImagesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem;
    width: 100%;
}

.ImagesContainer img {
    width: 100%;
    height: 100%;
}

.ImagesContainer a {
    padding: 5px;
}

Thank you to everyone, your answers helped me understand css better!

Image fit size of parent div

Here is a suggestion, that deals with different image sizes and kept aspect ratio.

If you resize the browser window, it still plays nicely with all the images.

Updated on request, using 1 container

html, body {  margin: 0;}.slider {  position: absolute;  left: 0;  top: 0;  height: 100%;  width: 100%;  background: #fff;}.slider .image {  background-color: #fff;  background-position: center center;  background-repeat: no-repeat;  background-size: contain;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  opacity:0;  animation: sliderimagefade 20s 0s infinite;}
.slider .image:nth-child(5) {  animation-delay: 0s;}.slider .image:nth-child(4) {  animation-delay: 4s;}.slider .image:nth-child(3) {  animation-delay: 8s;}.slider .image:nth-child(2) {  animation-delay: 12s;}.slider .image:nth-child(1) {  animation-delay: 16s;}
@keyframes sliderimagefade {  0% {    opacity:0;  }  5% {    opacity:1;  }  25% {    opacity:1;  }  30% {    opacity:0;  }}

<div class="slider">    <div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/1')">    </div>    <div class="image" style="background-image: url('http://lorempixel.com/400/100/animals/2')">    </div>    <div class="image" style="background-image: url('http://lorempixel.com/200/400/animals/3')">    </div>    <div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/4')">    </div>    <div class="image" style="background-image: url('http://lorempixel.com/300/300/animals/5')">    </div></div>

CSS: How can I set image size relative to parent height?

Original Answer:

If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.

Your need, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

And CSS:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/

Explanation

DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.

The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;

Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.

Magic moment:

transform: translate(-50%, -50%);

Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.

Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.

This is just a tricky way to figure out centroid of the image and the parent DIV and match them.

Apologies for taking too long to explain!

Resources to read more:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://css-tricks.com/centering-css-complete-guide/

How to scale an image to cover entire parent div?

http://jsfiddle.net/Log82brL/7/

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

Make an Image to Fit Its Parent Dimensions