CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mediasoft
Mediasoft

Reputation: 281

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

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

Upvotes: 0

Views: 1155

Answers (1)

Chris Spittles
Chris Spittles

Reputation: 15369

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>

Upvotes: 4

Related Questions