How to wrap an auto dimension image element tightly in a container?

Question

Say for example I have an image that preserves aspect ratio, ie, auto scaled with

img {
    max-height:100%;
    max-width:100%;
}

I now need to contain this inside a container which wraps it perfectly tight with something like

.wrapper{
     height:100%;
     width:100%;
     background:pink; /*verify*/
 }

But the wrapper leaves extra space at the corners. How could you solve this ? The HTML is as simple as

<div class="wrapper">
    <img src="image.jpg"/>
</div>

Here's a snippet of the code:

img {
    max-height:100%;
    max-width:100%;
}

.wrapper{
    height:100%;
    width:100%;
    background:pink; /*verify*/
}

<div class="wrapper">
    <img src="https://picsum.photos/200/200"/>
</div>

Have you checked the paddings? Are you using any css frameworks? — H. M.., Apr 03 '20 at 07:37

score 1 · Accepted Answer · answered Apr 03 '20 at 07:41

The div is a block level element. Therefore it spans the width that is available. If you want the wrapper element to wrap around the image without extra space you could set it's display property to inline-flex. This sets the wrapper width to the width and height of it's content.

I've set an extra padding of 2 pixels in the example to visualise the wrapping.

.wrapper {
  padding: 2px;
  display: inline-flex;
  background-color: red;
}

.image {
  max-width: 100%;
  max-height: 100%;
}

<div class="wrapper">
  <img class="image" src="https://via.placeholder.com/300x400" alt="" />
</div>

score 0 · Answer 2 · answered Apr 03 '20 at 07:35

0

have you try the following:

<img src="img.jpg" border=1 style="padding:50px;border:1px solid red">

By changing the "padding" setting to control the space between the border and the image.

answered Apr 03 '20 at 07:35

The KNVB

3,588
3
29
54

score 0 · Answer 3 · answered Apr 03 '20 at 07:38

don't give height and width to the wrapper, by doing so it will take its parent as reference. In your case wrapper will be 100% of parent height and 100% of parent width.

you can make the wrapper like this

img {
    max-height:100%;
    max-width:100%;
}
.wrapper{
     background:pink; /*verify*/
     display:inline-block;
 }

<div class="wrapper">
    <img src="http://placekitten.com/200/300"/>
</div>

By using display:inline-block for the wrapper, you are saying the browser to treat this element as inline not as block. So it will expand itself to accommodate its children if its height and width are not specified and it will not consume the whole width as the block elements do.

score 0 · Answer 4 · answered Apr 03 '20 at 07:41

Remove the 100% height and width from the wrapper as these values reference the wrapper's parent not it's contents. You can then set the wrapper's display to inline-block to make it stick to the dimensions of it's contents.

A final fix involves setting the vertical-align: middle; property to remove the space below the image that is caused by the browser allowing space for characters that hang below the baseline (g, y etc.)

Check out the snippet below:

img {
    max-height:100%;
    max-width:100%;
    vertical-align: middle;
}

.wrapper{
    display: inline-block;
    background:pink; /*verify*/
}

<div class="wrapper">
    <img src="https://picsum.photos/200/200"/>
</div>

How to wrap an auto dimension image element tightly in a container?

4 Answers4