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

Question

有没有办法使用ONLY CSS按比例调整图像大小（缩小比例）？

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

Answer 1

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

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

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

Answer 2

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

Answer 3

要调整图像比例使用CSS：

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

Answer 4

在2015年回顾：

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

我重新审视它作为所有常见的浏览器现在已经工作自动谢里夫上述建议，使作品更好，因为你不需要知道图像是否比较高。

旧版本： 如果你是的120x100例如框限制，你可以做

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

Answer 5

控制规模，保持比例：

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

Answer 6

img { 
    max-width:100%; 
} 

div { 
    width:100px; 
} 

在这个片段中，你可以做它在一个更有效的方式

Answer 7

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

Answer 8

为了通过保持其宽高比

尝试这个缩放图像，

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

Answer 9

如果它是一个背景图像，使用背景尺寸：含有。

范例CSS：

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

Answer 10

尝试

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

Answer 11

你总是需要这样的

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

在你的CSS文件

Answer 12

使用此易结垢的顶部技术

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

Answer 13

试试这个：

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

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

Answer 14

可以使用对象配合属性：

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

这将适合的图像，而无需按比例改变。

Answer 15

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

适合我。它缩小较大的图像以适应盒子，但将较小的图像保留为原始尺寸。

Answer 16

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

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

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

Answer 17

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