如何在不拉伸的情況下調整圖像大小？

我想要一個<img>，它的寬度是頁面的40％，並且會拉長。如何在不拉伸的情況下調整圖像大小？

我如何調整它的大小，而不伸展？

舉例來說，如果我有一個圖像，其文件原本是這樣的：

____8888________ 
____8888________ 
____8888________

在我的網頁上，通常情況下，它應該是這樣的：

____8888________ 
____8888________ 
____8888________

只要我做的瀏覽器縮小一點，max-width（假設這個例子中有10個字符）會生效。
當發生這種情況，我想它是：

____8888__ 
____8888__ 
____8888__

（就像它已經從右側切當然雙方都好），
而不是：

__888_____ 
__888_____ 
__888_____

任何伎倆（把它變成一個<div>的背景）是好的。
寬度和高度未知。
謝謝大家以前的回答，但是，對不起，我認爲我沒有把重點放在「之後限制其寬度到頁面的40％」，這意味着在寬度限制之前它應該看起來很正常。

來源

2012-01-13 tslmy

也許你可以使用JavaScript來獲取容器/瀏覽器的寬度和高度，然後計算實際的px而不是使用％。 – Tommy 2012-01-13 06:32:31

訣竅是把圖像轉換爲包含塊元素，例如DIV。一旦將圖像的寬度設置爲100％，這將指示瀏覽器將圖像寬度與DIV的左右邊緣齊平。創建流動佈局時

然後控制通過CSS的DIV的寬度，我覺得保持圖像中的塊級元素，使操作更加容易。

例子：

img.stretchy { 
 
width: 100%; /*Tells image to fit to width of parent container*/ 
 
} 
 
.container { 
 
width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" /> 
 
</div>

如果你婉的圖像被剪切/裁切以任何方式，將其設置爲大於它的父，和母公司的溢出CSS設置爲隱藏。

例子：

img.clipped { 
 
    width: 150%; /*Scales image to 150% width of parent container*/ 
 
    float: left; /*Floats image to left of container - clipping right hand side*/ 
 
    float: right; /*Floats image to right of container - clipping left hand side*/ 
 
} 
 
.container { 
 
    width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" /> 
 
</div>

希望這有助於...

來源

2012-01-13 06:42:32 sixtillnine

+1好答案。 – Wex 2012-01-13 06:57:30

Errrrrr ...我的意思是，圖像最初並沒有裁剪（如果我想裁剪，我會手動編輯圖像文件），只有當外部容器變得更窄時纔會出現「裁剪」效果。 – tslmy 2012-01-13 10:51:44

-1

你的意思裁剪圖像？如果這樣看待CSS溢出屬性。你也可以把它放到後臺，並居中在div

來源

2012-01-13 06:29:46

這裏有幾個選項。（請參閱這裏的所有這些選項的演示：http://jsfiddle.net/Squeegy/Gcrdu/）

第一個作爲未知大小的普通圖像。這顯示在任何大小它碰巧是。

<img src="http://www.google.com/logos/classicplus.png">

但事實證明，如果您只設置寬度或僅設置高度，則可以保留圖像的高寬比。另一個維度將自行調整以防止拉伸。

// HTML 
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink"> 

// CSS 
img.aspectshrink { 
    width: 100px; 
}

但是，當您使用CSS背景圖像時，您可以根據錨定背景的位置做一些創意修剪。

這是說「去」

// HTML 
<div class="cropped-right"></div> 

// CSS 
.cropped-right { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
}

這表示「鬥爭」：

// HTML 
<div class="cropped-left"></div> 

// CSS 
.cropped-left { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
};

來源

2012-01-13 06:54:06

好的感覺，哥們。雖然這不是我的最終答案，但我將非常感謝您的答案，以此來裁剪未來的圖像！謝謝。 – tslmy 2012-01-13 10:53:42

嘗試使用ImageResizer。這裏的鏈接：http://imageresizing.net/

來源

2014-04-04 05:33:05 JudasPriest

添加該類到IMG HTML標記，它會保存圖片，因爲它是，但將採取必要的特定的空間，ie.40％×40％，無拉伸圖像

.img{ 
    width:40%; 
    height:40%; //change to whatever your choice 

/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/ 
    object-fit:scale-down; 
}

來源

2017-09-21 13:13:35

如何在不拉伸的情況下調整圖像大小？

回答

相關問題