javascript - 如何调整父容器中的图像尺寸？(How to adjust image dimensions within parent container?)

Question

I am trying to adjust the image dimensions after uploading it.(上传后，我试图调整图像尺寸。)

Let's assume my uploaded image originally has 450x700 dimensions and its parent container has 400x400 dimensions.(假设我上传的图片最初的尺寸为450x700，其父容器的尺寸为400x400。) In my case, I use object-fit to fit image its parent container by preserving aspect ratio and it looks like(就我而言，我通过保留宽高比使用object-fit来为其父容器拟合图像，它看起来像) But I need to show image fully and object-fit is not the right option for this case.(但是我需要完整显示图像，而在这种情况下，不object-fit是正确的选择。) Removing object-fit and adding width and height with 100% makes it fully visible, meanwhile decreasing the quality.(删除object-fit并添加100% width和height可以使其完全可见，同时降低质量。) Here it looks like(在这里看起来像) In the last image the original image is this(在最后一个图像中，原始图像是这个) UPDATED(更新) Actually, I can solve it with object-fit: contain , but it's not 100 percent right for me or maybe there is no other way.(实际上，我可以使用object-fit: contain来解决它，但是它并不是100％适合我，或者也许没有其他方法。) With contain, I get this(随着包含，我得到这个) You can notice the white background of the image, which doesn't come well with background color of the container (which is light gray).(您会注意到图像的白色背景与容器的背景色（浅灰色）不太吻合。) Is there any possibility to solve it?(有解决的可能吗？)   ask by Norayr Ghukasyan translate from so