I have a component something like the image bellow
On the left side has a circular image with a gray background and fixed width and height; On the right side has a text with the title of the image
But when the title gets longer like showned in the screenshot, the image container gets squished horizontally. In the example above, the image should have 32x32 pixels, but it has 28x32, turning it oval instead of a sphere
The parent element of then two can streech vertically freely, are display: flex, and it has space for the two line text
Code of the image:
<button style="display: flex; background-color: transparent; margin: 0px; padding: 0px; cursor: pointer; border-width: 0px;align-items: center;width: 140px;">
<img style="width: 32px;height: 32px;object-fit: contain;max-height: 32px;margin-right: 0.25rem;background-color: rgb(238, 238, 238);justify-content: center;align-items: center;display: flex;border-radius: 100%;">
<span>Word biggger_word</span>
</button>How do I fix this?
CodePudding user response：
Just wrap the image in another element. Try this
<button style="display: flex; background-color: transparent; margin: 0px; padding: 0px; cursor: pointer; border-width: 0px;align-items: center;width: 140px;">
<span><img style="width: 32px;height: 32px;object-fit: contain;max-height: 32px;margin-right: 0.25rem;background-color: rgb(238, 238, 238);justify-content: center;align-items: center;display: flex;border-radius: 100%;"></span>
<span>Word biggger_word safsff sdfgdfg sdfgs dsfdsf</span>
</button>