css - 如何将图像宽度和高度调整为 100 x 100 的保持比例？

Question

这里有2张图片

1. 宽度：300 像素，高度：200 像素
2. 宽度：200 像素，高度：600 像素

我希望这两个都显示如下

1. 宽度：100 像素，高度：66.6 像素
2. 宽度：33.3 像素，高度：100 像素

这些调整为 100 像素的最小保持率。如何用 CSS 编写代码？

Answer 1

用这个...

image {
    width: 100px;
    height: auto;
}

当然，您可以相应地<img src="src" style="width:100px; height:auto;">更改宽度和高度100px。

Answer 2

将如下所示的类.resize应用于您的图像应该可以满足您的需求...

.resize {
    max-width: 100px;
    max-height: 100px;
}

示例：http: //jsfiddle.net/rU5qK/