CODEWITHSUNDEEP
css
DerFrederikHD
DerFrederikHD

Reputation: 11

displaying an image as big as possible

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>

Upvotes: 1

Views: 502

Answers (5)

Youssouf Oumar
Youssouf Oumar

Reputation: 46141

With 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;
}

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 20006

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>

Upvotes: 0

Amini
Amini

Reputation: 1792

  1. 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>

  1. 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.

Upvotes: 1

nart
nart

Reputation: 1848

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>

Upvotes: 0

Daniel Paul
Daniel Paul

Reputation: 514

img{   
 object-fit: contain;
}

use this for the image.

Upvotes: 0

Related Questions