如何缩小大图像但不拉伸小图像？

【问题标题】：How to shrink large images but not stretch small images?如何缩小大图像但不拉伸小图像？
【发布时间】：2014-06-25 15:50:12
【问题描述】：

我想在 WebBrowser 对象中显示任何给定文件夹中的图像文件。

理想情况下，如果图像比 WebBrowser 对象窄，它会以其原始大小显示，但如果图像比 WebBrowser 对象宽，它会自动调整大小（保持纵横比）到宽度WebBrowser 对象。换句话说，我想避免水平滚动。

我可以使用样式来做到这一点吗？

【问题讨论】：

【解决方案1】：

将宽度设置为 100%，将 max-width 设置为原始图像的宽度（以像素为单位）。

#myImage {
   width:100%;
   max-width:250px;
}

请参阅How to inject CSS in WebBrowser control?，了解如何在 WebBrowser 中使用 CSS。

【讨论】：

有没有办法在不知道图像宽度的情况下做到这一点？ IE。浏览器会判断它是否太宽而无法容纳并缩小它？
Width:100% 如果它对于容器来说太宽，则会减少它。麻烦的是，如果它太小，它也会拉伸它。 HTML/CSS 没有办法让浏览器知道图像的原始大小，但你可能会在 JS/jQuery 中找到一些东西。