CSS：100％寬度或高度，同時保持寬高比？

Question

目前，使用STYLE，我可以在高度上使用width: 100%和auto（反之亦然），但我仍然無法將圖像限制到特定的位置，分別是太寬或太高。

任何想法？

Answer 1

如果您只在圖像上定義了一個尺寸，圖像寬高比將始終保留。

問題是圖像比您更喜歡的更大/更高？

您可以將它放在設置爲圖像所需的最大高度/寬度的DIV中，然後設置overflow：hidden。那會超出你想要的任何東西。

如果圖像的寬度和高度都是100％：auto，並且您認爲它太高，那是因爲縱橫比被保留。您需要裁剪或更改寬高比。

請提供一些關於您具體嘗試完成的內容的更多信息，我會盡力提供更多幫助！

---編輯根據反饋---

你熟悉的max-width和max-height屬性？你可以隨時設置它們。如果你沒有設置任何最小值，並且設置了最大高度和寬度，那麼你的圖像將不會被扭曲（高寬比將被保留），並且它不會大於任何維度最長並達到其最大值的值。

Answer 2

通過將CSS max-width屬性設置爲100%，圖像將填充其父項元素的寬度，但不會呈現大於其實際大小的寬度，從而保留分辨率。

將height屬性設置爲auto可以保持圖像的高寬比，使用此技術可以覆蓋靜態高度並使圖像在所有方向上按比例彎曲。

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

Answer 3

幾年後，尋找相同的要求，我找到了一個使用background-size的CSS選項。

它應該在現代瀏覽器（IE9 +）中工作。

<div id="container" style="background-image:url(myimage.png)"> 
</div> 

而且款式：

#container 
{ 
    width: 100px; /*or 70%, or what you want*/ 
    height: 200px; /*or 70%, or what you want*/ 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

參考：http://www.w3schools.com/cssref/css3_pr_background-size.asp

而且演示：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Answer 4

這是我想出了一個非常簡單的解決方案如下孔卡的鏈接後，並看着背景大小。它將圖像向上吹，然後將其集中在外部容器中，而不是縮放它。

<style> 
#cropcontainer 
{ 
    width: 100%; 
    height: 100%; 
    background-size: 140%; 
    background-position: center; 
    background-repeat: no-repeat; 
} 
</style> 

<div id="cropcontainer" style="background-image: url(yoururl); /> 

Answer 5

最好在應該考慮寬高比的尺寸上使用自動。如果不設置其他屬性爲自動，大多數瀏覽器現在假設你要尊重寬高比，但不是所有的人（IE10在Windows Phone 8不，例如）

width: 100%; 
height: auto; 

Answer 6

使用JQuery等等，因爲CSS是一個普遍的誤解（關於簡單設計目標的無數問題和討論表明了這一點）。

CSS不可能做你看起來希望的東西：圖像的寬度應爲100％，但如果這個寬度導致高度過大，則應使用最大高度 - 當然，應保持正確的比例。

Answer 7

我想這就是你要找的東西，我一直在找我的自我，但後來我又記得它，因爲我找到了代碼。

background-repeat: repeat-x; 
background-position: top; 
background-size:auto; 
background-attachment: fixed; 

數字進化正在進行中。

Answer 8

有同樣的問題。對我來說，問題是，height屬性也已經在別處定義的，固定的，就像這樣：

.img{ 
    max-width: 100%; 
    max-height: 100%; 
    height: inherit !important; 
} 

Answer 9

不跳進一個老問題，但...

#container img { 
     max-width:100%; 
     height:auto !important; 
} 

即使這是如果您使用的是像WordPress這樣的CMS來爲您設置高度和寬度的CMS，則此功能非常適用，因爲您在高度上使用！重要覆蓋。

Answer 10

其中一個答案包括background-size：包含 css聲明，我非常喜歡它，因爲它直觀地陳述了你想要做什麼以及瀏覽器是做什麼的。

不幸的是，遲早你會需要申請一個影子，這不幸的是不能很好地與背景圖像解決方案發揮。

假設您有一個容器，其容量爲響應，但它具有明確界定最小和最大寬度和高度的邊界。

.photo { 
    max-width: 150px; 
    min-width: 75px; 
    max-height: 150px; 
    min-height: 75px; 
} 

和容器具有必須意識到所述容器的高度的像素的以避免得到該溢出或裁剪非常高的圖像一個img。

img還應該定義100％的最大寬度，以便首先允許渲染較小的寬度，其次是基於參數的百分比。 ;

.photo > img { 
    max-width: 100%; 
    max-height: 150px; 
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1); 
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,1); 
    box-shadow:   0 0 13px 3px rgba(0,0,0,1); 
} 

注意，它有一個很好的陰影）

在此小提琴享受活例如：http://jsfiddle.net/pligor/gx8qthqL/2/

Answer 11

我使用這個用於與高度的矩形容器和寬度固定的，但用的圖像不同的尺寸。

img { 
    max-width: 95%; 
    max-height: 15em; 
    width: auto !important; 
} 

Answer 12

簡單的解決方案：

min-height: 100%; 
min-width: 100%; 
width: auto; 
height: auto; 
margin: 0; 
padding: 0; 

順便說一句，如果你想中心在父DIV容器，你可以添加這些CSS屬性：

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

它應該按預期工作:)

Answer 13

簡單優雅的工作解決方案：

img { 
    width: 600px; /*width of parent container*/ 
    height: 350px; /*height of parent container*/ 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 14

這是不可能沒有JS，所以我寫小劇本：

var resize_images; 

resize_images = function(resize) { 
    var images, resize_process, resize_single; 
    if (resize == null) { 
    resize = false; 
    } 
    resize_single = function(that) { 
    if (that.height() <= 200) { 
     return that.css({ 
     'width': 'auto', 
     'height': '100%' 
     }); 
    } else { 
     return that.css({ 
     'width': '100%', 
     'height': 'auto' 
     }); 
    } 
    }; 
    resize_process = function(that) { 
    that.css({ 
     'width': 'auto', 
     'height': 'auto' 
    }); 
    resize_single(that); 
    return resize_single(that); 
    }; 
    images = $('.image img'); 
    return images.each(function() { 
    if (resize) { 
     return resize_process($(this)); 
    } else { 
     return $(this).on('load', function() { 
     return resize_process($(this)); 
     }).each(function() { 
     if(this.complete) $(this).trigger('load'); 
     }); 
    } 
    }); 
}; 

resize_images(); 

$(window).resize(function() { 
    return resize_images(true); 
}); 

CoffeeScript

而且SCSS：

.image { 
    position: relative; 
    overflow: hidden; 
    width: 50%; 
    height: 200px; 
    float: left; 

    img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    } 
} 

你仍然必須堅持寬度或高度父塊。如果代碼的大小小於父塊大小，則此代碼將高檔圖像。

jsfiddle.net

Answer 15

試試這個

background-size: 100% 100%; 
    background-image: url("PATH_TO_IMAGE"); 
    background-repeat: no-repeat;