CODEWITHSUNDEEP
htmlcssimage
matt
matt

Reputation: 44293

How can I fill a div with an image while keeping it proportional?

I found this thread — How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? — that is not entirely the thing that I want.

I have a div with a certain size and an image inside of it. I want to always fill-out the div with the image regardless if the image is landscape or portrait. And it doesn't matter if the image is cut-off (the div itself has overflow hidden).

So if the image is portrait I want the width to be 100% and the height:auto so it stays in proportion. If the image is landscape I want the height to be 100% and the width to be auto`. Sounds complicated right?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Since I don't know how to do it I simply created a quick image of what I mean. I can't even properly describe it.

enter image description here

So, I guess I'm not the first one asking this. However I couldn't really find a solution to this. Maybe there is some new CSS3 way of doing this - I'm thinking of flex-box. Any idea? Maybe it's even easier than I expect it to be?

Upvotes: 216

Views: 454439

Answers (19)

Bart
Bart

Reputation: 339

Another interesting way I have learned to achieve this is by making use of padding-bottom on the parent container to control the size and ratio of the image.

When you use padding-bottom: 100% on an empty container, CSS automatically fills the width by 100%. With that, you can start playing around with the padding-bottom for the height and optionally adjust the width of the parent container to create the desired aspect ratio.

The parent element must be set as relative, and the image should be absolute, covering the entire container.

Here's an example with a landscape and portrait image rendered in the same aspect ratio:

.container{
  padding-bottom: 40%;  
  position: relative;
width: 50%; //optional, use in combination with bottom padding as height
}

.container img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
<h1>Using portrait image</h1>
<div class="container">
   <img src="https://images.pexels.com/photos/14339714/pexels-photo-14339714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Could be portrait or landscape"/>
</div>

<h1>Using landscape image</h1>
<div class="container">
   <img src="https://images.pexels.com/photos/16208497/pexels-photo-16208497/free-photo-of-zee-natuur-wolken-kust.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Could be portrait or landscape"/>
</div>

Best to run the snippet in full screen.

source: https://v1.tailwindcss.com/course/locking-images-to-a-fixed-aspect-ratio

Upvotes: 2

ivy
ivy

Reputation: 81

You should use the CSS property object-fit on the img tag:

<div class="container">
  <img src="some-image.jpg" style="width: 100%; height: 100%; object-fit: cover" />
</div>

Upvotes: 8

Cesar Devesa
Cesar Devesa

Reputation: 1277

Centering all. Even if the image width is greater than the container, showing the entire image. I can only do this using JS.

I know it's not the purpose of the post, but it was my purpose when I came here, and it may be useful to someone!

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">

        body {
            margin: 0;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            background-color: #000;
        }

        #container{
            position: absolute;
            top: 0px;
            width: 100vw;
            height: 100vh;
            text-align: center;
        }

        #my_img{
            height: 100%;
            width: auto;
        }

    </style>

</head>
<body>
    <div id="container">
        <img src="images/filename.jpg" id="my_img">
    </div>

    <script type="text/javascript">
        
        window.onload = function () {
            imgElem = document.getElementById('my_img');
            if (imgElem.width > document.body.scrollWidth) {
                // image is larger than container >> adjust by width and center
                imgElem.style.height = 'auto';
                imgElem.style.width = '100%';
                imgElem.style.position = 'relative';
                imgElem.style.transform = 'translateY(-50%)';
                imgElem.style.top = '50%';
            }
        }
        
    </script>

</body>
</html>

Upvotes: 0

Raphael Setin
Raphael Setin

Reputation: 845

My solution was:

<div
  style={{
    display: "flex",
    width: "100%",
    height: "100%",
  }}
>
  <img
    style={{
      minWidth: "100%",
      minHeight: "100%",
      objectFit: "cover",
    }}
    alt=""
    src={url}
  />
</div>

The above will scale up an image in order for it to cover the parent container.
If you just need to fit inside, then change objectFit to contain.

Upvotes: 2

Marat Tanalin
Marat Tanalin

Reputation: 14123

Consider using background-size: cover (IE9+) in conjunction with background-image. For IE8-, there is a polyfill.

Upvotes: 5

Landerqvist
Landerqvist

Reputation: 19

Try this:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Hope this helps!

Upvotes: 1

dippas
dippas

Reputation: 60543

Here is an answer with support to IE using object-fit so you won't lose ratio. Using a simple JS snippet to detect if the object-fit is supported and then replace the img for a svg:

//ES6 version
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('img[data-object-fit]').forEach(image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

//ES5 version
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', function() {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
      (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
      image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
    }));
  });
}
img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}


/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

Note: There are also a few object-fit polyfills out there that will make object-fit work.

Here are a few examples:

Upvotes: 3

Sandeep K Nair
Sandeep K Nair

Reputation: 2932

You can achieve this using css flex properties. Please see the code below:

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Upvotes: 8

maksim1
maksim1

Reputation: 191

This should do it:

img {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

Upvotes: 19

Hermilton
Hermilton

Reputation: 1259

It's a bit late but I just had the same problem and finally solved it with object-fit: cover with the help of another stackoverflow post (https://stackoverflow.com/a/29103071).

img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Hope this still helps somebody.

Ps: Also works together with max-height, max-width, min-width and min-height css properties. It's espacially handy with using lenght units like 100% or 100vh or 100vw to fill the container or the whole browser window.

Upvotes: 112

Artur Klassen
Artur Klassen

Reputation: 337

All answers below have fixed width and height, which makes solution "not responsive".

To achieve the result but keep image responsive I used following:

  1. Inside container place a transparent gif image with desired proportion
  2. Give an image tag inline css background with image you want to resize and crop
.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div>

Upvotes: 18

Isius
Isius

Reputation: 6974

If I correctly understand what you want, you may leave the width and height attributes off the image to maintain aspect ratio and use flexbox to do the centering for you.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

JSFiddle here.

I tested this successfully in IE9, Chrome 31, and Opera 18. But no other browsers were tested. As always you must consider your particular support requirements.

Upvotes: 252

Yassine Nacif
Yassine Nacif

Reputation: 150

A simple way I figured out to do this is by using object-fit: cover on the img inside the container

<div class="container"> 
  <img class="image" src="https://mymodernmet.com/wp/wp-content/uploads/2020/11/International-Landscape-Photographer-Year-PhotographER-1st-KelvinYuen-2.jpg">
</div>

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

.container {
  height: 100px; /*Set any dimensions you like*/
  width: 50px;
}

As far as I tested, this works regardless of the dimensions of the image to use, and this satisfies the "Best case" as you state in the question, since the result is vertically and horizontally centered.

Upvotes: 14

Sarthak Maheshwari
Sarthak Maheshwari

Reputation: 537

Just fix the height of the image & provide width = auto

img{
    height: 95vh;
    width: auto;
}

Upvotes: -3

Yaseen
Yaseen

Reputation: 184

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>

Upvotes: 3

Reverse Engineered
Reverse Engineered

Reputation: 358

The CSS object-fit: cover and object-position: left center property values now address this issue.

Upvotes: 0

Sivasakthivel Kalaiarasu
Sivasakthivel Kalaiarasu

Reputation: 27

You can use div to achieve this. without img tag :) hope this helps.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
<div class="img">	
</div>
<div class="img1">	
</div>

Upvotes: 1

holist
holist

Reputation: 91

An old question but deserves an update as now there is a way.

The correct CSS based answer is to use object-fit: cover, which works like background-size: cover. Positioning would be taken care of by object-position attribute, which defaults to centering.

But there is no support for it in any IE / Edge browsers, or Android < 4.4.4. Also, object-position is not supported by Safari, iOS or OSX. Polyfills do exist, object-fit-images seems to give best support.

For more details on how the property works, see CSS Tricks article on object-fit for explanation and demo.

Upvotes: 8

Noel Carcases
Noel Carcases

Reputation: 721

Here you have my working example. I have used a trick that is setting the image as background of the div container with background-size:cover and background-position:center center

I have placed the image with width:100% and opacity:0 making it invisible. Note that I am showing my image only because I have an special interest on calling the child click event.

Please note that altought I am ussing angular it is completely irrelevant. 

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

The result is the one that you define as optimal in all cases

Upvotes: 0

Related Questions