span should have width and height of child img

Question

I currently have a problem, which I first though is trivial (it may is), but I don't have any idea, how to get this done. I have a span, which is just a wrapper for an image, and the span should actually have the width and height of the child element. By default, the width is fine, but the height of the span does not fit the height of the image. If I change it to block, the height is fine, but it's at 100% width (which is kinda expected, since it is a block element). The child image is of unknown width and height.

Edit:

I acutally tried inline-block, but it does not work as expected. I added a toggle for this in the snippet below, please give it a try.

$('#toggleInline').click(function() {
 $('#removed').removeAttr("style");
});

$('#toggleBlock').click(function() {
 $('#removed').removeAttr("style");
 $('#removed').css('display', "block");
});

$('#toggleInlineBlock').click(function() {
 $('#removed').removeAttr("style");
 $('#removed').css('display', "inline-block");
});

img {
  /* just because the sample image is too large */
  width: 50%;
}

span.removed {
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

span.removed img {
  opacity: 0.85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</span>

<div style="margin-top: 15px">
  <button id="toggleInline">
    display: inline (default)
  </button>

  <button id="toggleBlock">
    display: block
  </button>

  <button id="toggleInlineBlock">
    display: inline-block
  </button>
</div>

This is what I expected it to look like:

its because you have width: 50% on img, if you change it to 100% then you get the effect you want — Chris Li, Sep 12 '18 at 09:07
@ChrisLi But what if the image is smaller than 100% of the screen width. I dont want to stretch it at all, just keep the size as it is. — Matthias Seifert, Sep 12 '18 at 09:11
@ChrisLi is right, I tried this with a smaller image, and `display:inline-block` does the job. — Carl Binalla, Sep 12 '18 at 09:11
Nevermind, I tried this and it works just fine. Damn, thank you ;) If you write this as answer, I can accept it :) — Matthias Seifert, Sep 12 '18 at 09:14
@MatthiasSeifert Are you sure you picked the answer explaining the problem and how to solve it best? — connexo, Sep 12 '18 at 09:21
Yeah, I know. I really like your answer, but Chris was the first one who had a helpful hint ... and now I don't know who "deserves" the accepted answer :( — Matthias Seifert, Sep 12 '18 at 09:25
It's not about *deserving* primarily, Q/As on StackOverflow is meant to serve as a reference for anyone diving into any coding problem in the future. As such, the objectively best answer should always be the one picked. That's exactly why there's the pick, and the upvote available. Remember it also takes longer to give more thorough, researched answers. That shouldn't be punished either, do you agree? — connexo, Sep 12 '18 at 12:38

connexo · Accepted Answer · 2018-09-12T09:20:42.070

It seems if an element with display: inline-block; has a child node that comes with a percentage-based width it is automatically switched to display: block; internally, which kind of makes sense because the percentage relates to the width of the parent element (and not to the 100% dimensions of the image) (which basically has width: min-content;, making it a circular dependency). If you set the images' width to a fixed width, it works as you expect, or simply don't specify a width at all.

Imagine, your current definition basically does this:

Dad: I'm as wide as you, my child.

Child: I'm half of your width, dad!

Dad: But wait, that cuts me down to half of my width because I exactly engulf you.

Child: Cmon dad, that leaves with only half as much space as before. I need to shrink!

Dad: Don't shrink, or this whole thing will start over and we will both end up being 0px wide!

$('#toggleInline').click(function() {
 $('#removed').removeAttr("style");
});

$('#toggleBlock').click(function() {
 $('#removed').removeAttr("style");
 $('#removed').css('display', "block");
});

$('#toggleInlineBlock').click(function() {
 $('#removed').removeAttr("style");
 $('#removed').css('display', "inline-block");
});

img {
  /* just because the sample image is too large */
  width: 50%;
}

span.removed {
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

span.removed img {
  opacity: 0.85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</span>
</p>
<div style="margin-top: 15px">
  <button id="toggleInline">
    display: inline (default)
  </button>

  <button id="toggleBlock">
    display: block
  </button>

  <button id="toggleInlineBlock">
    display: inline-block
  </button>
</div>

score 1 · Answer 2 · answered Sep 12 '18 at 09:15

The reason is you have width: 50% on img tag, so img is always 50% of span. To change this you can give img width: 100% and change the width of span to get the effect you want.

body {
  width: 100%;
}
img {
  /* just because the sample image is too large */
  width: 100%;
}

span.removed {
  display: inline-block;
  width: 50%;
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

span.removed img {
  opacity: 0.85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</span>

This works exactly as setting no width at all on the image. – connexo Sep 12 '18 at 12:41 — connexo, Sep 12 '18 at 12:41
how did you do that? if you dont set a width it overflows – Chris Li Sep 13 '18 at 07:01 — Chris Li, Sep 13 '18 at 07:01

score 0 · Answer 3 · answered Sep 12 '18 at 08:56

The span element has default display value as inline, which basically means that it's height is the same as line-height set for span's parent element. The display block sets width to 100% always, but there is a combination of those two, which is display: inline-block which is basically height: auto; and both can be changed accordingly and can take expand based on their child elements. And just for good measure, set width: auto; for that element as well.

I actually tried this, but it looks the same as `display: block` in this case — Matthias Seifert, Sep 12 '18 at 08:59

score 0 · Answer 4 · answered Sep 12 '18 at 09:23

Combine inline-block for the span with block for the img:

.removed {
  display: inline-block;
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

.removed img {
  display: block;
  opacity: 0.85;
  width: 200px;
}

<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100">
</span>

Or use inline-block for the span and the image and set the line-height for the span to 0.

.removed {
  display: inline-block;
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

.removed img {
  display: block;
  opacity: 0.85;
  width: 200px;
}

<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100">
</span>

Do not use a relative width for the img because this will be calculated based on the parent width. So width: 50%; for the img would result in an img, that fills only half of the span.

span should have width and height of child img

Edit:

4 Answers4