How to Auto-Resize an Image to Fit a 'Div' Container

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

How to resize image to fit in its container with CSS

You need to use object-fit:cover css property to img or video should be resized to fit its container.

Run Snippet below.

.parent {
  border: 1px solid;
  width: 20vh;
  height: 20vh;
  overflow: hidden;
  display: flex;
}

img {
  max-width: inherit;
  max-height: inherit;
  height: inherit;
  width: inherit;
  object-fit: cover;
}

<div class="parent">
  <img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>

How to auto-resize a smaller image to fit a large div?

For img elements use object-fit: cover and in your case like this:

img {
  width: 100%;
  /* max-width: 100%; */
  max-height: 100%;
  object-fit: cover;
}

object-fit only works if you make the img element capture the full dimensions first - full width of its parent div in this case.

Working codesandbox

How do I auto-resize an image to fit a div container

@troy-wu, what do you think of this?

Try adjusting the viewport width here! https://jsfiddle.net/rickydam/ob4umwp3/

.one {  width: 70%;  background-color: lightgray;  display: inline-block;}
.two {  width: 30%;  background-color: gray;  display: inline-block;  margin-left: -5px;}
img {  max-height: 20vw;  display: inline-block;}

<div class="one">  <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"></div>
<div class="two">  <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"></div>

How do I fit an image to a div?

I quickly created the following css grid which looks like your desired result to demonstrate. I have also added a couple cool tricks you can do with CSS grid.

body, html{    margin: 0;    padding: 0;    box-sizing: border-box;}*, *:before, *:after {    box-sizing: inherit;  }
.container{  margin: 0 auto;  width:100%;  height: 100vh;  display:grid;  grid-template-columns: 5% repeat(3, 1fr) 5%;  grid-template-rows: 5% repeat(2,1fr) 5%;  grid-gap: 1%;}.imageOne{  grid-row: 2/3;  grid-column: 2 / -2;  background-color:rgb(247,247,247);  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');  background-repeat:no-repeat;  background-size: 100% 100%;   background-position:center;  color:rgb(255,255,255);}.imageTwo{  grid-row: 3/4;  grid-column:2 / 3;  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');  background-repeat:no-repeat;  background-size: 100% 100%;   background-position:center;  color:rgb(255,255,255);}.imageThree{  grid-row: 3/4;  grid-column:3 / 4;  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');  background-repeat:no-repeat;  background-size: 100% 100%;   background-position:center;  color:rgb(255,255,255);}.imageFour{  grid-row: 3/4;  grid-column:4 / 5;  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');  background-repeat:no-repeat;  background-size: 100% 100%;   background-position:center;  color:rgb(255,255,255);}

<div class="container">  <div class="imageOne">    image one  </div>  <div class="imageTwo">    image two  </div>  <div class="imageThree">    image three  </div>  <div class="imageFour">    image four  </div></div>

How to make the photo fit to its container

Use CSS object-fit: cover

// demo showing size adjusting at different sizes
const container = document.querySelector(".container");
const range = document.querySelector("input[type='range']");

range.addEventListener("input", () => {
  container.style.width = `${range.value}px`;
});

.container {
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
}
img {
  min-width: 100%;
  object-fit: cover;
}

<div class="container">
  <img src="https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" alt="img" />
</div>
<label for="range">Width of container</label>
<input type="range" name="range" min="1" value="250" max="600" />

Automatically resize an image to fit in a container

Try to add class "img-responsive" to your image tag.

<img class="img-responsive" src ="haha.png" alt = "Alternative Text" />

Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%;, height:
auto; and display: block; to the image so that it scales nicely to the
parent element.

http://getbootstrap.com/css/#images