用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') %>