Width of flex container does not adjust to scale(0.5) img

Viewed 30
<div class='container'>
    <img src='...' alt='...' />
</div>
.container {
    box-sizing: border-box;
    display: flex;
    border: 6px solid grey;
}
img {
    width: 50%;
}

With this, the container retains the full width of the image before scaling (height does adjust). I tried transform: scale(0.5); but then neither the height or width of the container adjusts to the new image size. The former refers to the width of the parent, but why doesn't the latter work? Also, the image sizes vary, so the container cannot have a static width and height.

I simply want to scale the image down by 50% and have the flex container adjust to it. Thank you.

Here's an image of the result I want, but the image scaled down by 50%

example

0 Answers
Related