javascript - Strange margin in a resized img tag

Question

Conisder the html code below:

<a>
<img src="//path/to/img.jpg" />
</a>

The CSS code is

a {
   height: 64px;
   width: 100%;
   padding: 10px;
   display: block;
}

img {
   max-height: 100%;
}

The original size of the image is 246 x 74. Due to the effect of css codes, the height of image will be resized into 64 - 10 * 2 = 44px. The aspect ratio of the image will remain unchanged, which means the width of the image will becoem 44 / 74 * 246 = 146px. The browser renders the image tag as expected. However, the width of the a tag is 246px instead of 146px;

As shown in the figure, there is a strange "brown block" to the left of the img tag, which is not listed as margin.

My question is how can I make the width of the a tag equal to the width of the img tag without explicity set width: 246px for the a tag.

question from:https://stackoverflow.com/questions/65642289/strange-margin-in-a-resized-img-tag

Answer 1

You can use width: max-content