How to force the image to display given height and width without stretching in HTML DIV Tag?

Question

I need some help to make the image fit inside the DIV Tag with provided height and width and should not stretch. As a few images are Landscape and a few are Portrait, I need to force them to fit into the DIV OR IMG Tag.

<div class="frame" style="">
  <img id="photo" src="http://pocketlink.epocketlife.com/ImageRepository/images/events/ADEBAB1C-4FAF-4D65-A43D-A02978B76340/7adb104b-5140-45d9-a694-56cf5112917d.png">
</div>

This is one of the Examples I found, you may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output

possible duplicate of [CSS: force image width and height without stretching](http://stackoverflow.com/questions/1733006/css-force-image-width-and-height-without-stretching) — Christian, Jul 10 '15 at 08:18
see this answer may help you, http://stackoverflow.com/questions/1733006/css-force-image-width-and-height-without-stretching?rq=1 — Insane Skull, Jul 10 '15 at 08:20
And if possible then use the image i provide in my question. thanks — Mediasoft, Jul 10 '15 at 08:20
please use the above image the one i provide and keep the width:550px; and height 220px; then try and tell me the links you people provides are working or not — Mediasoft, Jul 10 '15 at 08:25
bczo for me the above links provide by **Christian varga** and **Awesome AP** are not working. i try them already. — Mediasoft, Jul 10 '15 at 08:26
**@fuyushimoya** not working for me. thats why i said in my Question that few of the images have Portrait and few Landscape. that's why i provide one of the image in my example — Mediasoft, Jul 10 '15 at 08:29
the above examples are good when the image have same height and width — Mediasoft, Jul 10 '15 at 08:29
I'm not sure the stretch you mean, you want to remain the same ratio but crop those out of the div? Or you just want to keep the ratio of width and height and let the large one to fit to div? — fuyushimoya, Jul 10 '15 at 08:34
**@fuyushimoya** you can use this link to update there http://jsbin.com/vikanovaya/edit?html,css,output one of my application image is there for your concern — Mediasoft, Jul 10 '15 at 08:36
I'm afraid that what I see on the [jsbin](http://jsbin.com/vikanovaya/edit?html,css,output) is already the result you want(a image with size:123.75x220). — fuyushimoya, Jul 10 '15 at 08:41
ok i forward you an image for your clarification. may that make you more understand — Mediasoft, Jul 10 '15 at 08:45
Just do not define width and height in div's class.. [check this out](http://jsbin.com/sirinosaji/1/edit?html,css,output).. Is this what you want? — Prabhu Vignesh Rajagopal, Jul 10 '15 at 08:46
**@fuyushimoya** please get the resulted image from this Link http://www.megafileupload.com/4Loy/img.png — Mediasoft, Jul 10 '15 at 08:46
**@PrabhuVigneshRajagopal** & **@fuyushimoya** i have already provide an example image. please visit it. — Mediasoft, Jul 10 '15 at 08:53

Chris Spittles · Answer 1 · 2017-09-14T06:36:33.790

You will need to use some CSS position trickery to achieve what you want but hopefully one of these examples will do what you want.

Example 1 - A Single Image

In the example below, the image will grow or shrink when the image hits the edge of the container. If you resize the example horizontally or vertically it will never crop. (Try the fullscreen example for instance).

Requires: CSS Only

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI Light", "Helvetica Neue LT", "Helvetica Ultra LT", "Roboto", Arial, sans-serif;
}
.gallery {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  overflow: hidden;
  z-index: 2;
}
.gallery .imageWrapper {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
.gallery .imageWrapper img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="gallery isFullScreen">
  <div class="imageWrapper">
    <img src="http://via.placeholder.com/3500x1500" />
  </div>
</div>

Example 2 - Thumbnails

In this example there are two images that don't conform to their containers aspect ratio. They are resized so that their longest edge hits the div first and then they are centered. All thumbnail containers should now be the same size and images that do not conform shrink to fit.

Requires: CSS Only

.galleryArea {
 background: rgba(0,0,0,0.7);
 padding: 10px;
    overflow: hidden;
}
.galleryArea .imageWrapper {
 position: relative;
    width: 100px;
    height: 100px;
    float: left;
    background: #fff;
}
.galleryArea .imagePosition {
 position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
.galleryArea .imagePosition img {
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      max-width: 100%;
      max-height: 100%;
}

<div id="contentGallery" class="galleryArea">
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/150x400" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x100" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
</div>

Example 3 - Thumbnails that Stretch

In this example, the two images that do not conform to their containers aspect ratios are now stretched so that their shortest edge expands to fill the container and their longest edge overflows. This makes the end result a little neater but requires JavaScript to help things along.

Requires: CSS and JavaScript (jQuery)

$(window).on("load", function() {
 
 orientateGalleryImages($("#contentGallery").children().children().children("img")); 
 
});

function orientateGalleryImages(images) {
 
 images.each(function() {
  
  var thisImage = jQuery(this);
  
  if(thisImage.height() > thisImage.width()) {
   
   thisImage.addClass("portrait");
   
  } else if(thisImage.width() > thisImage.height()) {

   thisImage.addClass("landscape");

  } else {
   
   thisImage.addClass("square");
   
  }
  
 });
 
}

.galleryArea {
 background: rgba(0,0,0,0.7);
 padding: 10px;
    display: flex;
}
.galleryArea .imageWrapper {
 position: relative;
 width: 10%;
 padding-top: 10%;
 overflow: hidden;
}
.galleryArea .imagePosition {
 position: absolute;
 top: -50%;
 left: -50%; 
 width: 200%; 
 height: 200%;
}
.galleryArea .imagePosition img {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
}
.galleryArea .imagePosition img.landscape {
 max-height: 50%;
    height: 50%;
 left: -50%;
 margin-left: 25%;
}
.galleryArea .imagePosition img.portrait {
 max-width: 50%;
    width: 50%;
}
.galleryArea .imagePosition img.square {
 max-width: 50%;
    max-height: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/150x400" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x100" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
 <div class="imageWrapper">
  <div class="imagePosition">
            <img src="http://placehold.it/300x300" />
  </div>
 </div>
</div>

Perfect explanation :) – venkata krishnan Jul 10 '15 at 09:37 — venkata krishnan, Jul 10 '15 at 09:37

How to force the image to display given height and width without stretching in HTML DIV Tag?

1 Answers1

Example 1 - A Single Image

Example 2 - Thumbnails

Example 3 - Thumbnails that Stretch