使用CSS按比例调整图像大小？[重复]

尝试这个：

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

你总是需要这样的东西

html
{
    width: 100%;
    height: 100%;
}

在您的css文件顶部

我们可以使用媒体查询和响应式设计原理在浏览器中使用CSS调整图像大小。

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

img {
    max-width:100%;
}

div {
    width:100px;
}

使用此代码段，您可以更有效地完成此操作

我相信这是最简单的方法，也可以通过标记中的inline style属性使用<img>。

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

要么

<img src="flower.png" style="transform: scale(0.7);">

使用这种简单的缩放技术

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

img{
    max-width:100%;
    object-fit: scale-down;
}

为我工作。它会缩小较大的图像以适合盒子，但将较小的图像保留为原始大小。

<img style="width: 50%;" src="..." />

对我来说工作得很好...还是我错过了什么？

编辑：但是请参阅Shawn关于意外增大的警告。

css属性max-width和max-height 很好用，但IE6不支持，我相信IE7也支持。您可能希望在高度/宽度上使用它，以免意外放大图像。您只想按比例限制最大高度/宽度。

回顾2015年：

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

我已经重新审视了它，因为所有常见的浏览器现在都具有上面谢里夫（Cherif）建议的自动工作功能，因此即使您不需要知道图像的宽度是否大于高度，它的效果也更好。

较旧的版本：例如，如果您受120x100框的限制，则可以

<img src="http://image.url" height="100" style="max-width: 120px">

您可以使用对象适合属性：

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

这将适合图像，而不会按比例更改。

通过保持纵横比缩放图像

尝试这个，

img {
  max-width:100%;
  height:auto;
}

请注意，width:50%会将图片的大小调整为图像可用空间的50％，同时max-width:50%将图片的大小调整为其自然大小的50％。使用此规则进行移动Web设计时，这一点非常重要，因此对于移动Web设计max-width应始终使用。

尝试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

控制大小并保持比例：

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

要使用CSS按比例调整图像大小，请执行以下操作：

img.resize {
    width:540px; /* you can use % */
    height: auto;
}