如何使图像在img标签中看起来完整

Question

我试图使来自网址的图像包含整个图像，但只有其中一部分可见，而不是整个图像。

这是代码：

.img-fluid {
    max-width: 100%;
    height: auto;
}
.rounded-sm {
    border-radius: 0.2rem!important;
}
.profile-thumbnail {
    padding: 4px;
    border: 1px solid #ccc;
}
.img-thumbnail {
    padding: 0.125rem;
    background-color: #f5f7fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

<img class="img-fluid rounded-sm img-thumbnail profile-thumbnail thumb180" src="https://s3.us-east-1.amazonaws.com/cdn-local.vetpraxis.app/public/3/logo/b826474a65edb7bc61c9b8d37d50484a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=ASIAYP3SYAPYEC6PJG7S%2F20240208%2Fus-east-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20240208T011543Z&amp;X-Amz-Expires=900&amp;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEBoaCXVzLWVhc3QtMSJHMEUCIBz2rKzoI1w40TFTdSUmXvlybZ0SoGsOhdYUAqiaiVaWAiEA15ZSR7ydqwLB2RlOAJaYZF0rwrXLlTkwrjHNUz7kfy4qzQQI4v%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAAGgw1ODM4MTkzMzA1NDQiDMBSFM9TgtPfGuwFjyqhBE4ZwcND4qik2pIYVCEpDpmQxNiyaZexIC6%2B3DilhEKvc87yFY7%2BohiNU%2B7p9Yb%2F5BsPHuk10nJT8D%2Bz280li8Nlc6sBTPE1uWB%2FSlY8DeFo9QLSp7VtYBd%2FmerlZb1O%2FzMkt26neMurMbIK5JYJarhBoJ419Z4Th4GFnKI8zLE3ualeopCipTYKREEXTgRo%2FYTUF6jZUCEhc1z8lByUgfwMBJufWCMkEsAhhirxCEPhsz%2BQmr1B6cb4ojs7%2FvzkUv92Clth4Y%2F60OtVhxPLuLzp%2B0wJSVrxBfVcy%2BnRyxhjZTuWf7i76HX7Mt2PY25y616kjpc%2FuOB059VqfVS2N7raSOY1CXVhvg6B7XYKQuccXAxIflkUaqPWOCewDqT2rsCenexmA4SdqdrTSOTatS%2FNuDmPfSy92xZlt9AMMcnDIeYjSk8VraDbG%2B59Gok0iwcHFEdA7bFKT6%2FlkS1qNsv3Nhwd2pHASo%2FrdOLNrK1GCw%2BBVMBOMj0aaWJu2%2FmQkIhN%2FrOx9utb3ijLGCT3vPjv4J09prkZUDf1nZstWr7v7rJFHawwYWOrBgObT3omIetTz0nEoCxuzxdybjqxiuX%2B15LrRBiMr%2F9mtudey3DQV3zonSOjRwC%2B74iEjcsF%2FxcJcrF27372mGKQYePtO6TLsEHq9t34w3O6tF1V7GuKVcmikk4VR8kiRjeVlg6CigVUoVxM8VrihQZO%2FeguzgJyML3WkK4GOoUCHyAtq0eV0iLBDaUGXonlaYviZwEwQsOQUYdtC6DT3St%2F0VwjbnOf7bshpsJeVeyYOR%2FDNyCoEMk3OwZfl2tKSTEg1pRDejhjNYjTps3dvPfK68uKhvuAcWrbrwxXF2X6qAKXjT5XU6lh40XjY0tIYcZKkR5%2Bltf5cgPidkFF%2F0xpFqw782VJE3%2BGfT4DC6sFU%2B3v04fbTmBFmwG83kEXe7xi5ZWbbZ22vVS5Br9ZXosVfc14mRCZIDj3KoCcV3mMIcYuh%2FG9enAMEKBOmQdQwiuCMGFSjyklL61%2Ffhi8rxa6Zzh7ubfOQUamdGimOWteJospbJ7jcwlGy65uOWfsE3I81hmk&amp;X-Amz-Signature=89294ec955e31ae945a36a84395439f8b40b442834ee2155660dc3799be06493&amp;X-Amz-SignedHeaders=host&amp;x-amz-user-agent=aws-sdk-js%2F3.6.1%20os%2FWindows%2FNT_10.0%20lang%2Fjs%20md%2Fbrowser%2FChrome_121.0.0.0%20api%2Fs3%2F3.6.1%20aws-amplify%2F5.0.6_js&amp;x-id=GetObject">

这是结果：

Answer 1

是的，秘诀就是从良好的形象开始。

.img-fluid {
    max-width: 100%;
    height: auto;
}
.rounded-sm {
    border-radius: 0.2rem!important;
}
.profile-thumbnail {
    padding: 4px;
    border: 1px solid #ccc;
}
.img-thumbnail {
    padding: 0.125rem;
    background-color: #f5f7fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}
.g-logo {
    width: 100px;
}

<img class="g-logo img-fluid rounded-sm img-thumbnail profile-thumbnail thumb180" src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg">