使用CSS按比例调整图像大小？

有没有办法调整（缩小）图像比例使用唯一的CSS？

我正在做的JavaScript的方式，但只是试图看看这是可能的CSS。

Answer 1

使用CSS按比例调整图像大小：

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

Answer 2

控制大小和维持比例：

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

Answer 3

如果是背景图片，请使用background-size：contains。

示例css：

 #your-div { background: url('image.jpg') no-repeat; background-size:contain; } 

Answer 4

尝试

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

Answer 5

请注意， width:50%会调整为图像可用空间的50％ ，而max-width:50%会将图像调整为其自然尺寸的50％ 。 在移动网页devise中使用这个规则时要考虑到这一点非常重要，所以对于移动网页devise，应该始终使用max-width 。

Answer 6

通过保持宽高比来缩放图像

尝试这个，

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

Answer 7

2015年重访：

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

我已经重新审视过，因为现在所有常见的浏览器都已经由Cherif自动build议了，所以工作得更好，因为你不需要知道图像是否比较高。

旧版本：如果你受限于120×100的盒子，你可以做

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

Answer 8

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

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

这将适合图像，而不是按比例改变。

Answer 9

CSS属性的最大宽度和最大高度工作很好 ，但不支持IE6，我相信IE7。 你会想要使用这个高度/宽度，所以你不会意外地缩放图像。 您只想按比例限制最大高度/宽度。

Answer 10

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

为我工作得很好…或者我错过了什么？

编辑：但看到肖恩关于意外升迁的警告。

Answer 11

使用这个简单的缩放技术

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

Answer 12

 img { max-width:100%; } div { width:100px; } 

有了这个片段，你可以用更有效的方式做到这一点

Answer 13

你总是需要这样的东西

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

在你的CSS文件的顶部

Answer 14

尝试这个：

 div.container { max-width: 200px;//real picture size max-height: 100px; } /* resize images */ div.container img { width: 100%; height: auto; } 

Answer 15

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

为我工作。 它缩小较大的图像，以适应盒子，但留下较小的图像的原始大小。

Answer 16

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

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

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