Match child's width not working

Question

I have a link (a element) with an image (img element) inside. I'm trying to make the parent element (a element) the same width as its child, which has a width of 75%.

I made the link to display: inline-block, just like this answer says to do, but it's not working. The parent element is still larger than its child. What am I doing wrong, and how can I fix it?

JSFiddle

#img-link {
  display: inline-block;
  background-color: lightblue;
}
#img {
  width: 75%;
}

<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>

score 1 · Accepted Answer · answered Feb 01 '17 at 05:43

1

You need to set 75% for a and 100% for img

#img-link {
  display: inline-block;
  background-color: lightblue;
  width: 75%;
}
#img {
  width: 100%;
}

<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>

answered Feb 01 '17 at 05:43

Banzay

9,080
2
23
44

score 0 · Answer 2 · answered Feb 01 '17 at 05:43

0

Remove display: inline-block; from your #img-link rule.

Otherwise the image is going to be 75% of the a block.

answered Feb 01 '17 at 05:43

dwtm.ts

729
4
16

score 0 · Answer 3 · answered Feb 01 '17 at 05:49

0

try this one:

#img-link {
    display: inline-block;
    background-color: lightblue;
}

#img {
    width: 100%;
}

DEMO HERE

answered Feb 01 '17 at 05:49

Ivin Raj

3,308
2
23
55

score 0 · Answer 4 · answered Feb 01 '17 at 05:49

0

set width 100% and 75% on link

#img-link {
  display: inline-block;
  background-color: lightblue;
  width: 75%;
}
#img {
  width: 100%;
}

answered Feb 01 '17 at 05:49

Web Dev Guy

1,525
3
13
38

Don't Copy and Paste @Banzay Answer – Ivin Raj Feb 01 '17 at 05:50
I didn't copy paste was playing in jsfiddle and then posted. – Web Dev Guy Feb 01 '17 at 05:57
@IvinRaj just because two answers match it doesn't mean he copied it. Grow up! – Rahul Feb 01 '17 at 07:02

Rahul · Answer 5 · 2017-02-01T07:03:24.273

There can be multiple solutions:

The first one is to remove display: inline-block; css from the anchor that wraps image. Then, it will resize according to the size of the image.

#img-link {
  /*display: inline-block;*/
  background-color: lightblue;
}
#img {
  width: 75%;
}

<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>

Change the width of the image from 75% to 100%

#img-link {
  display: inline-block;
  background-color: lightblue;
}
#img {
  width: 100%;
}

<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>

Match child's width not working

JSFiddle

5 Answers5