CODEWITHSUNDEEP
htmlcsswebflexbox
notzenox
notzenox

Reputation: 21

Flexbox: <a> wrapper has original <img> width, not resized one

I have an image, which is 1039x1039 in a link... Something like this:

HTML:

<a href="#"><img src="img.png" alt="alt"></a>

CSS:

img {
  align-self: center;

  height: 100%;
  width: auto;
  border: none;
}

a {
  flex: 0 0 0;
}

Of course the container is set to display:flex. The problem is that when I load the page the img is rescaled to 80x80 but the link is 1039x80. Only after clicking the link it rescales to 80x80. It's like flexbox checks for the img width after refreshing the styles? Any thoughts?

EDIT: I've recreated the problem here: https://jsfiddle.net/287cLqvh/6/

Upvotes: 1

Views: 1963

Answers (3)

notzenox
notzenox

Reputation: 21

It turns out <a> is an inline element, so it doesn't get resized by flexbox. I had to add this style to <a>:

display: inline-block;
height: 100%;
width: auto;

Upvotes: 1

rudolph schmitz
rudolph schmitz

Reputation: 373

flex is a property that applies to the children of a flex container. In this case, your flex container for your image, is your <a> and the children of that container is <img>. In order for flex to work, you'd have to display: flex; on the <a> tag.

Additionally, I removed your flex: 0 0 0; because I'm not sure what you're trying to achieve with that. I would think you'd want to just use flex: 0 1 auto; -- but you wouldn't need to specify that as it's the default value for flex.

Regardless, I think you should post the entire code that's available in order to get a better handle on what your code actually looks like.

Here's an example: https://jsfiddle.net/qox4fa98/

You can reference this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Mers
Mers

Reputation: 734

You are missing an equal (=) sign after src in your img element. 

img {
    align-self: center;
    height: 100%;
    width: auto;
    border: none;
    }
a {
    flex: 0 0 0;
}
<a href="#"><img src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" alt="alt"></a>

Upvotes: 0

Related Questions