CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Jackymamouth
Jackymamouth

Reputation: 149

Resizing image to perfectly fit a div with variable dimensions

I need to scale an image inside a div properly, so that the image keeps its proportions and so that either the width is equal to 100% or the height is equal to 100%.
So basically that the image takes up as much space as possible in the div whilst maintaining aspect ratio. And lets keep in mind that the div can change width and height.

So I have the intuition for this, but I don't have the code ...

The idea would be to get the ratio (height/width) of the div with JavaScript/jQuery. => ratio A Then get ratio (height/width) of the image. => ratio B

Note: If ratio > 1, then we have a portrait image or div.
And if ratio < 1, then we have a landscape image or div.

If ratio A < ratio B, then we want height of image to be set at 100%; If ratio A > ratio B, then we want width of image to be set at 100%;

So if we have a responsive div, width or height = 100% will change dynamically.

Is this possible?

Upvotes: 3

Views: 8973

Answers (3)

Yuri Gor
Yuri Gor

Reputation: 1463

If you need img tag for SEO/alt/ARIA/whatever, here is modified Cryptc_Slaughtr's solutions combined into one:

.container {
  width: 250px;
  height: 200px;
  border: 1px solid #333;
  background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
.container img {
  width:100%;
  height: 100%;
  opacity:0;
}
  
<div class="container"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" title="Put your image" /></div>

Upvotes: 0

TSlegaitis
TSlegaitis

Reputation: 1310

You can simply set parent div to position relative, and overflow hidden. And then do this: 

.bg-img {
   bottom: -1000px;
   left: -1000px;
   margin: auto;
   min-height: 100%;
   min-width: 100%;
   position: absolute;
   right: -1000px;
   top: -1000px;
}

This will insure no matter whats the size of the container it will always cover it 100%. This will also contain image proportions.

Upvotes: 0

Awol
Awol

Reputation: 219

Here are 2(css) solutions :

  1. http://codepen.io/cryptcslaughtr/pen/LNoMBY

.container {
  width: 100px;
  height: 200px;
  border: 1px solid #333;
  background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
<div class="container"></div>

http://codepen.io/cryptcslaughtr/pen/qZGLvE

.container {
  width: 250px;
  height: 130px;
  border: 1px solid #333;
}
.container img {
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" />
</div>

Upvotes: 1

Related Questions