Flex image won't shrink with screen size when container is a hyperlink

flex-shrink image
flex image example
flexbox different size images
flexbox image aspect ratio
fit image in flexbox
flex contain image
flex image too large
make image fit in flex

Can someone let me know if this is an undocumented bug with flexbox, or that I'm just doing it wrong? I've got 3 images lined up in a row inside a div container. This is as simple as it gets folks.

Without any hyperlinks, all 3 images shrink down perfectly as they should.

<div style="width: 100%; margin: 0 auto; display: flex; justify-content: center;">
  <a href=""><img src="flash-tooltip.png"></a>
  <img src="html-tooltip.png">
  <img src="portables-tooltip.png">
</div>

Now, only 2 out of the 3 images when viewed on all devices shrink down correctly depending on manually maximizing dragging the browser, of via viewport.

The only image that will not change shape or size is the image with the hyperlink. So, I took the hyperlink off the first image. And decided to test it by placing it on the 2nd, now the 1st image and the 3rd image shrinks fine.

But, the 2nd image stays the exact same size? Tried then adding hyperlinks to all the images and none of them change to match the screen width?

Am I wrong to say flex items if they are images won't flex if they have a hyperlink lol? Surely this cannot be the case right?

Chrome: Flexbox doesn't scale down images correctly · Issue #225 , The problem concerns images inside a container with display: flex set. Here's a Codepen that illustrates the problem. Compare Firefox (which  Learn how to align images side by side with CSS. How to create side-by-side images with the CSS float property: How to create side-by-side images with the CSS flex property: Note: Flexbox is not supported in Internet Explorer 10 and earlier versions. It is up to you if you want to use floats or flex to create a three-column layout.

I don't know why, but this solves the problem. I would like to know why as I cannot find out any information about this issue in any HTML/CSS documents.

If you add the following.

<style>

    img {
    max-width: 100%;
    height: auto;
    }
</style>

Then all 3 images will shink perfectly. Even if they have hyperlinks. Funny enough if you set just the width: 100%; then the image with the hyperlink stays the exact same size as the image is, and all the others without hyperlinks blow up to the 100% size of the container.

I didn't know flexbox had such rules that needed you to set image max-widths to make items responsive/shrink down if they have a hyperlink attached.

So, tried it in chrome: Only the image now with the anchor shrinks down, the other 2 stay the same size. FireFox all 3 shrink down, but chrome only shrinks the image with the hyperlink wrapped around it.

Tried wrapping hyperlinks around each of the other 2 images and in chrome, they all shrink down fine.

Can someone explain what is going on? How can i set a max-width: and height: auto on a hyperlink?

Flex-basis won't shrink image in flexbox - HTML-CSS, Hi all, Can someone please tell me why #header-img { flex-basis: 10em; doesn't shrink the image id='header-img' in this code? I am struggling  The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. The flexbox properties are supported in all modern browsers. To start using the Flexbox model, you need to first define a flex container. The element above represents a flex container (the blue area) with three flex

It's tough to say without seeing your CSS, but you probably are not selecting the images within <a> tags. If you alter your CSS to select images that are inside of <a> tags, it should work fine.

Centering image inside flexbox - HTML & CSS, How would I center the image (vertically and horizontally) inside flexbox item. Filters: Retrieving Data from Server Retrieving Data from Server mx.controls Image - AS3 Flex: Properties | Properties | Constructor | Methods | Global

I've added my complete working solution. Thanks to many people here giving their various methods. So, this is for anyone else who may be struggling.

First lets set the style's up.

<style>

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

</style>

adding min-width: 0; | min-height: 0; seems to be overkill, but with chrome, it works much better apparently than setting them as auto;

Since it's using flexbox we don't add the usual width: 33.33%; even if there are 3 images. In flexbox, this will just space them out way to far apart within a 100% wide div.

Here's the really important part I found out the hard way.

You must use either width: 100% on the images, or max-width: 100%; otherwise, (On Chrome without adding either 100% width or max-width: 100%; it just won't flex/shrink down when you minimize the browser to test its responsiveness.)

So, next to keep each of the 3 images in perfect aspect ratio remember to include each image inside its own div container. Otherwise, they will shrink but will just skew up to each other as they do.

As you can see the first image is even wrapped in a hyperlink, but because it's inside its own div it will shrink and grow completely flush and inline with the other images. This saves using extra markup and saves adding a span tag then making that a flex container to contain the hyperlink. I've tried both ways this is by far the easier method.

I've used inline styles for the flexbox container. (bad habit.)

<div style="border: 2px solid red; margin: 0 auto; display: flex; justify-content: center;">

<div>
<a href=""><img src="flash-tooltip.png"></a>
</div>

<div>
<img src="html-tooltip.png">
</div>

<div>
<img src="portables-tooltip.png">
</div>
</div>

Remember to close off that last /div it's a real gotcha!

And that's how I've done it. Tested it in many browsers works perfectly. Even on mobile phones and tablets.

If you don't like flexbox? You can do the same thing using regular floats. I've included this same method as above, only this time in a float: version.

Display: Flex → Why is the logo image stretching vertically, Of course that won't work, there was no margin on the img to begin with, the margin is on its parent container, so setting it to 0 on the image will  Together, the OneTouch Verio Flex ® meter and the OneTouch Reveal ® app can help you manage your blood sugar. Get to know your meter. OneTouch Verio Flex® meter – Setting Up Your Meter - YouTube. 2.5K subscribers. OneTouch Verio Flex® meter – Setting Up Your Meter. If playback doesn't begin shortly, try restarting your device.

Adaptive Photo Layout with Flexbox, We'll be using an unordered list of images and just 17 lines of CSS, This approach doesn't fully respect the aspect ratios of photos (but it's  The innovative P-OLED display that is used with the G Flex is unfortunately far from perfect. If you switch from a dark image to a light one, you may find that the old image takes some time to

flex-wrap, I've been experimenting with flex-wrap recently, and found that Safari doesn't support it (on desktop or mobile), although it claims to, ie. Modernizr  then why is the logo image stretching vertically → Live Link . Display: Flex → Why is the logo image stretching vertically Of course that won't flex from .snippet-box and putting image

625560, I added a second case to the codepen: -(on the left side) if the flex-basis is set chrome doesn't scale the images at all -(on the right side) if the  Flex - Image Control - The Image control lets you import JPEG, PNG, and GIF files at runtime. You can also embed any of these files at compile time by using @Embed(source='filename').

Comments
  • That's great Michael_B, very useful information. I noticed you included span where the a item will be is that then a child flex container so the content inside the span will then be the child? I'm only asking because it's when you start adding hyperlinks the images start messing up. Am I right in saying this a tag would go inside the span tag, now the span tag is a flex container inside the original flex container? I found out if i wrap each image inside it's own div container it all works fine, but I rather just use 1 container and cut down on sections, or divs if possible.
  • I noticed you included span where the a item will be is that then a child flex container so the content inside the span will then be the child? ... Yes. I mentioned this at the start of my answer.
  • Am I right in saying this a tag would go inside the span tag, now the span tag is a flex container inside the original flex container? ... No. I just used the span to show that the problem exists with any element, as I mentioned at the start of my answer. It's just for example. Switch the span back to an a.
  • Go through the answer a few times. All the details are there, but it may take a few rounds before fully understanding all of the concepts. Also, follow the links I posted. They provide even more details that will help you understand the various forces at work here. If you have any more questions let me know.
  • Had a good play around with this. I do have a question. If you wrap the images in separate div's the round circles maintain their apsect ratio. Without the div's they just scrunch up together. As there any way of making them maintain their aspect ratio's without encasing each image inside a separate div?
  • your image inside the link is not a flex child, that's why :)
  • The CSS is inline width: 100%; margin: 0 auto; display: flex; justify-content: center; in the original post above. And it's exactly like it's laid out in the demo above. The anchor points are fine.