Flexbox image in link not working

flex-shrink
inline-flex
flex; align
flex-fill
flex-basis
flex-row
flex bottom
flexbox wrap

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/

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;

Wrapping a link around an image destroys flexbox layout and , This is the problem reduced to its most simple, in that the bottom row was the original code I was using to get the perfect layout, and the top row  But you’re right it’s not really necessary, especially given the other issues it’s causing. It’s not ideal but I did manage to keep the centred text and also have the image resize as it should. I basically had to target only the div that container the text with flexbox and just have the image container use text-align: center;. Seems to

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>

Chrome: Flexbox doesn't scale down images correctly · Issue #225 , It bit me on a project I'm working on. Chromium bug 625560. The problem concerns images inside a container with display: flex set. Here's a  In short: flexbox will only work practically when using the full screen width and not limiting any flexible item with a max-width. As soon as you want to set a limit to any item, it falls apart. Reply

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/

Hash Tag Links That Don't Headbutt The Browser Window, The problem comes when you want to set a background colour or image on the target element, and if you want to use padding-top too. The solution is to use  The best way to learn flexbox is to use it to move a bunch of boxes around. So, that’s exactly what we’ll do in the Flexbox chapter, as you can see below. This doesn’t just go for layouts, though—the entire tutorial follows this hands-on philosophy, from Basic Web Pages to Web Typography .

Adaptive Photo Layout with Flexbox, The solution is not only lightweight but also quite simple. We'll be using an unordered list of images and just 17 lines of CSS, with the heavy showing two full rows of photos at a reasonable size, and hinting at more below. See “Can I Use” for the full list of IE11 Flexbox bugs and more. There are numerous Flexbox bugs in IE11 and other browsers – see flexbox on Can I Use-> Known Issues, where the following are listed under IE11: IE 11 requires a unit to be added to the third argument, the flex-basis property

CSS Flexbox (Flexible Box), Example. The column value stacks the flex items vertically (from top to bottom): Use flexbox to create a responsive image gallery that varies between four, two  Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage; Inline, for text; Table, for two-dimensional table data; Positioned, for explicit position of an element; The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Understanding Flexbox: Everything you need to know, The image above is the result you may have hoped for. In the example below, flex-item 1 and 3 are given the same order values In the event that you get stuck, the link to the repository for this tutorial is in the next section. Flexbox Not Centering Vertically in IE (6) check this link https: there's a simpler way to centralize the image without having to create a container for it.

Comments
  • I fixed it using width: 0... but still, does anyone know why it's like this? EDIT: now other content overlaps on the link
  • Please include all the relevant code. We cannot reproduce the issue with the code you've provided so far. It seems that you have conflicting rules somewhere in your code.
  • Made an edit :)
  • your img is nested within the a.img-container element, which is in turn nested within div.container element that has a define height of 3em, and that's where you are running into issues most likely; however, even after checking the jsfiddle link, I still do not see the behavior you are referring to. The image is getting its width from its parents, and the code works as expected. My question is, do you want the image to be 1039x1039 or 80x80? Hard coding either of these values for the img element will do the trick.
  • Now the img is 1039x80 also
  • I believe I'd need to see more of the code to understand why. I just pulled down a stock image from the internet to demo. Did you change or remove the flex: 0 0 0; from your code? I'm not sure what you took away from my answer.
  • Sorry it was this long... I recreated the problem here. As you can see the link is 1000x48 and after clicking it (img or background, doesn't matter) it resizes