displaying an image as big as possible-CodePudding

How can I scale up a image as much as possible without changing the picture ratio. So its either 100% width or 100% height

<div class="container"><img src=""></div>

CodePudding user response：

You can use CSS background which is recommended in this case. You can read more about CSS backgrounds here.

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background: url(https://picsum.photos/200) center/cover no-repeat;
}

<div></div>

You can use the image tag (as you did) and set the width & height property to 100%.

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

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

<div>
  <img src="https://picsum.photos/200/300" />
</div>

P.S.: You can set the height to auto so the image becomes responsive.

CodePudding user response：

Width that you can give whatever width or height value to the container, and the image will fit in with a correct look.

.container{
  height : 500px;
  width : 500px;
}

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

CodePudding user response：

img{   
 object-fit: contain;
}

use this for the image.

CodePudding user response：

You can use object-fit: cover, the image will be sized to maintain its aspect ratio while filling the element’s entire content box

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div>
      <image
        src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-cat-wearing-sunglasses-while-sitting-royalty-free-image-1571755145.jpg"
        alt="test"
        class="img"
      />
 </div>

CodePudding user response：

Just use object-fit: contain; for the image

.image-container {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  padding: 15px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="image-container" style="height: 500px;">
  <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="">
</div>
<div class="image-container" style="width: 500px;">
  <img src="https://www.w3schools.com/html/img_girl.jpg" alt="">
</div>