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

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

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

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

css属性max-区和max-区可以工作伟大，但IE6不支持，我相信IE7。您希望在高度/宽度上使用此属性，这样您就不会意外地放大图像。您只想按比例限制最大高度/宽度。

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

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

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">

控制尺寸，保持比例：

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

img {
max-width:100%;
}


div {
width:100px;
}

使用此代码片段，您可以以更有效的方式执行此操作

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

更新：这可能是一个旧的Firefoxbug，现在似乎已经修复了。

通过保持图像的长宽比来缩放图像

试试这个，

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

如果它是背景图像，请使用background d-size：包含。

示例css：

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

试试看

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

你总是需要这样的东西

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

在你的css文件的顶部

使用这种简单的缩放技术

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

试试这个：

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


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

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

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

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

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

对我很有用。它缩小了较大的图像以适应盒子，但保留了原始大小的较小图像。

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

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

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

image_tag("/icons/icon.gif", height: '32', width: '32') 我需要设置高度：'50px'，宽度：'50px'到图像标签，这段代码从第一次尝试注意我尝试了上面所有的代码，但没有运气，所以这一个工作，这是我的代码从我的_nav.html.erb：
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

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

.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);">